/* BlueCheck design tokens, copied from the bluecheck-ui-ux brand kit (colors, typography, spacing, effects). Edit there first. */

/* ============ BlueCheck color system ============
   Brand anchors from logo: Royal #1766F3, Navy #0D3A97.
   Extended with Sky (light accent) and Silver (cool metallic neutrals). */

:root {
  /* --- Royal blue (primary) --- */
  --royal-50:  #EEF4FE;
  --royal-100: #D9E7FD;
  --royal-200: #B3CEFB;
  --royal-300: #82ADF8;
  --royal-400: #4A88F6;
  --royal-500: #1766F3;   /* logo royal */
  --royal-600: #124FCC;
  --royal-700: #0F41AE;
  --royal-800: #0D3A97;   /* logo navy */
  --royal-900: #0A2B70;
  --royal-950: #071D4C;

  /* --- Sky blue (secondary accent) --- */
  --sky-100: #E4F2FF;
  --sky-200: #C4E2FF;
  --sky-300: #9CCEFF;
  --sky-400: #6FB5FF;
  --sky-500: #4D9FFB;
  --sky-600: #2F7FDB;

  /* --- Silver (cool neutrals) --- */
  --silver-0:   #FFFFFF;
  --silver-50:  #F7F9FC;
  --silver-100: #EEF2F7;
  --silver-200: #DFE5EE;
  --silver-300: #C7D0DD;   /* "silver" metal tone */
  --silver-400: #A3AFC2;
  --silver-500: #7C8AA0;
  --silver-600: #5B6980;
  --silver-700: #414E63;
  --silver-800: #2A3547;
  --silver-900: #182233;
  --silver-950: #0C1322;

  /* --- Semantic hues (kept in the cool family) --- */
  --green-500: #12946A;
  --green-100: #DDF3EB;
  --amber-500: #B97E10;
  --amber-100: #FBEFD6;
  --red-500:   #D33A4B;
  --red-100:   #FBE3E6;

  /* ============ Semantic aliases — LIGHT ============ */
  --surface-page:   var(--silver-50);
  --surface-card:   var(--silver-0);
  --surface-raised: var(--silver-0);
  --surface-sunken: var(--silver-100);
  --surface-inverse: var(--royal-950);
  --surface-brand:  var(--royal-500);
  --surface-brand-soft: var(--royal-50);

  --text-display: var(--royal-900);
  --text-body:    var(--silver-800);
  --text-muted:   var(--silver-500);
  --text-faint:   var(--silver-400);
  --text-on-brand: #FFFFFF;
  --text-link:    var(--royal-600);
  --text-link-hover: var(--royal-700);

  --border-subtle: var(--silver-200);
  --border-strong: var(--silver-300);
  --border-brand:  var(--royal-500);
  --ring: color-mix(in oklab, var(--royal-500) 35%, transparent);

  --accent:        var(--royal-500);
  --accent-hover:  var(--royal-600);
  --accent-press:  var(--royal-700);
  --accent-soft:   var(--royal-50);
  --accent-soft-hover: var(--royal-100);

  --status-success: var(--green-500);
  --status-success-bg: var(--green-100);
  --status-warning: var(--amber-500);
  --status-warning-bg: var(--amber-100);
  --status-danger:  var(--red-500);
  --status-danger-bg: var(--red-100);
  --status-info:    var(--sky-600);
  --status-info-bg: var(--sky-100);
}

/* ============ Semantic aliases — DARK ============ */

/* ============ BlueCheck typography ============ */
:root {
  --font-display: "Marcellus", "Times New Roman", serif;       /* regal inscriptional serif */
  --font-sans: "Albert Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Scale (1.25 ratio, 16 base) */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 25px;
  --text-2xl: 31px;
  --text-3xl: 39px;
  --text-4xl: 49px;
  --text-5xl: 61px;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;

  --tracking-display: 0.01em;   /* Marcellus breathes slightly */
  --tracking-caps: 0.14em;      /* silver eyebrow labels */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}

/* ============ BlueCheck spacing, radius, sizing ============ */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Soft corner system (6–10px) */
  --radius-sm: 6px;    /* inputs, tags, small controls */
  --radius-md: 8px;    /* buttons, menu items */
  --radius-lg: 10px;   /* cards, dialogs */
  --radius-xl: 14px;   /* hero panels, device shells */
  --radius-full: 999px;

  /* Control heights */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;

  --container-max: 1120px;
}

/* ============ BlueCheck elevation, borders, motion ============ */
:root {
  /* Soft, cool, blue-tinted shadows — never gray/black-heavy */
  --shadow-sm: 0 1px 2px rgba(13, 58, 151, 0.06);
  --shadow-md: 0 2px 8px rgba(13, 58, 151, 0.08), 0 1px 2px rgba(13, 58, 151, 0.05);
  --shadow-lg: 0 8px 24px rgba(13, 58, 151, 0.12), 0 2px 6px rgba(13, 58, 151, 0.06);
  --shadow-xl: 0 20px 48px rgba(7, 29, 76, 0.18), 0 4px 12px rgba(7, 29, 76, 0.08);

  /* Metallic silver edge — the brand's "silver" appears as hairlines, not fills */
  --edge-silver: inset 0 0 0 1px var(--silver-200);
  --edge-silver-strong: inset 0 0 0 1px var(--silver-300);

  /* Motion: composed, stately. Fades + small translates; no bounces. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 320ms; /* @kind other */
}