/* ==========================================================================
   AwardRadar — Design Tokens (source of truth)
   Direction: "Instrument & Broadsheet" — docs/AWARDRADAR-VISUAL-DIRECTION.md

   Every accent below was COMPUTED, not eyeballed:
     * saturation ceiling S <= 0.58 (the neon read comes from max saturation)
     * every text accent >= 4.5:1 against the surface it sits on (WCAG 2.2 AA)
     * every solid fill >= 3:1 against the page, with >= 4.5:1 label contrast
   The previous palette (#00e5ff cyan at S=1.00, #d4af37 gold at S=0.74)
   was the single largest contributor to the "cyberpunk dashboard" read.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------- typography */
  /* Editorial serif carries brand voice; grotesque carries the interface;
     mono carries machine facts (hashes, IDs, source names). No webfonts:
     zero network dependency, zero layout shift. */
  --type-editorial: "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
                    Palatino, "Source Serif Pro", Georgia, serif;
  --type-ui:        "Inter", "Segoe UI", system-ui, -apple-system,
                    "Helvetica Neue", Arial, sans-serif;
  --type-mono:      "JetBrains Mono", "SF Mono", "Cascadia Mono", Consolas,
                    "Liberation Mono", monospace;

  /* Type scale — a real scale (1.25 major third), not arbitrary px */
  --t-2xs:   0.6875rem;  /* 11px  micro-labels, legends */
  --t-xs:    0.75rem;    /* 12px  meta, table captions */
  --t-sm:    0.8125rem;  /* 13px  dense data rows */
  --t-base:  0.9375rem;  /* 15px  body / interface default */
  --t-md:    1.0625rem;  /* 17px  lede, emphasised body */
  --t-lg:    1.375rem;   /* 22px  section titles */
  --t-xl:    1.875rem;   /* 30px  view titles */
  --t-2xl:   2.5rem;     /* 40px  headline-2 */
  --t-3xl:   3.5rem;     /* 56px  headline */
  --t-4xl:   4.75rem;    /* 76px  broadsheet display */

  /* Value typography — prices and mileage are the product's loudest voice */
  --t-val-sm: 1.5rem;
  --t-val-md: 2.25rem;
  --t-val-lg: 3.25rem;

  --lh-tight:   1.06;
  --lh-snug:    1.22;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-display: -0.022em;
  --ls-tight:   -0.012em;
  --ls-normal:  0;
  --ls-wide:    0.02em;
  --ls-caps:    0.11em;   /* eyebrow / label tracking */

  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* ------------------------------------------------- INSTRUMENT surface */
  /* The authenticated app: ink, dense, quiet. Neutrals are slightly cool
     but desaturated (S <= 0.25) so accents do the semantic work. */
  --ins-canvas:  #0d1014;
  --ins-panel:   #141821;
  --ins-raised:  #1b202b;
  --ins-sunken:  #0a0d11;

  --ink-100: #eef1f6;   /* primary text            16.8:1 on canvas */
  --ink-70:  #a8b0bf;   /* secondary text           8.7:1 on canvas */
  --ink-45:  #7f8797;   /* tertiary / meta   4.9:1 canvas · 4.5:1 on raised */
  --ink-25:  #3f4654;   /* disabled, dim strokes                    */

  --line-ins:        #232936;
  --line-ins-strong: #333b4b;

  /* --------------------------------------------------- BROADSHEET surface */
  /* The public site: warm paper. The luminosity inversion between marketing
     and app is the brand's structural signature. */
  --bs-paper:     #f4f1ea;
  --bs-paper-alt: #eae6dc;
  --bs-paper-deep:#e0dbcd;

  --bs-ink:     #16191d;   /* 15.6:1 on paper */
  --bs-ink-70:  #4a5058;   /*  7.2:1 on paper */
  --bs-ink-45:  #686d76;   /*  4.6:1 on paper */
  --bs-ink-25:  #b6b0a4;

  --line-bs:        #d8d2c4;
  --line-bs-strong: #c2bcab;

  /* ------------------------------------------------------------- accents */
  /* ONE action hue (azure, 206deg). Not a palette — a signal.
     Dark variants sit on --ins-raised; -bs variants sit on --bs-paper-alt. */
  --act-azure:            #588eb8;  /* S .52 · 4.64:1 on raised  */
  --act-azure-hover:      #67a6d6;  /* S .52 · 6.21:1 on raised  */
  --act-azure-fill:       #456f8f;  /* S .52 · white text 5.11:1 */
  --act-azure-fill-hover: #497799;  /* S .52 · white text 4.57:1 */

  --act-azure-bs:       #406785;    /* S .52 · 4.82:1 on paper-alt, white on it 5.73:1 */
  --act-azure-bs-hover: #314f66;    /* S .52 · 6.90:1 on paper-alt */

  /* -------------------------------------------------- value semantics */
  /* Brass = miles/points. It is a UNIT OF MEASURE, never decoration.
     If brass appears where no mileage is involved, that is a bug. */
  --val-brass:      #a38a4e;   /* S .52 · 4.89:1 on raised */
  --val-brass-bs:   #705f36;   /* S .52 · 4.99:1 on paper-alt */

  --val-positive:   #49996f;   /* S .52 · 4.71:1 — fare moved in user's favour */
  --val-positive-bs:#336b4d;   /* S .52 · 5.03:1 */
  --val-negative:   #cc7062;   /* S .52 · 4.71:1 — fare moved against */
  --val-negative-bs:#8f4e45;   /* S .52 · 5.04:1 */
  --val-caution:    #b28156;   /* S .52 · 4.79:1 — degraded / stale */

  --act-azure-press: #3b5f7a;   /* S .52 · pressed state */
  --act-azure-line:  #2e485c;   /* S .50 · accent hairline */
  --act-azure-weak:  rgba(88, 142, 184, 0.12);   /* selected row wash */

  /* Hairlines that carry meaning in evidence blocks */
  --val-positive-line: #2f6146;
  --val-negative-line: #7e463e;
  --val-brass-line:    #6b5a33;
  --val-caution-line:  #573f2a;
  --val-neutral-line:  #3f464c;

  /* Washes: semantic tints for tag backgrounds. Alpha keeps them tied to
     the surface below instead of introducing new opaque colours. */
  --val-brass-weak:    rgba(163, 138, 78, 0.13);
  --val-positive-weak: rgba(73, 153, 111, 0.13);
  --val-negative-weak: rgba(204, 112, 98, 0.13);
  --val-caution-weak:  rgba(178, 129, 86, 0.13);
  --val-neutral-weak:  rgba(168, 176, 191, 0.10);

  /* Text colour that sits on a filled accent button */
  --ink-on-accent: #f7fafc;

  /* ----------------------------------------------------------- spacing */
  /* 4px base grid. Every gap in the product resolves to one of these. */
  --s-1:  0.25rem;  --s-2:  0.5rem;   --s-3:  0.75rem;  --s-4:  1rem;
  --s-5:  1.25rem;  --s-6:  1.5rem;   --s-7:  1.75rem;  --s-8:  2rem;
  --s-10: 2.5rem;   --s-12: 3rem;     --s-14: 3.5rem;   --s-16: 4rem;
  --s-18: 4.5rem;   --s-20: 5rem;     --s-24: 6rem;     --s-28: 7rem;
  --s-32: 8rem;

  /* ------------------------------------------------------------ radius */
  /* Ceiling 10px. Large radii read as consumer-app chrome and substitute
     for hierarchy; precision instruments have tight corners. */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;   /* filter chips only */

  /* ------------------------------------------------------------ shadow */
  /* Neutral only. A coloured shadow is a glow, and glow is the fastest
     route to the cyberpunk read. Elevation is rare by design. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.46);
  --shadow-bs: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-bs-lg: 0 10px 30px rgba(0, 0, 0, 0.12);

  /* ------------------------------------------------------------ motion */
  /* Four durations, three curves. Anything outside this is undisciplined. */
  --m-instant:  90ms;    /* hover, focus, press */
  --m-fast:     160ms;   /* state change, tag swap */
  --m-standard: 240ms;   /* panel, drawer, route change */
  --m-editorial:520ms;   /* broadsheet reveal only */

  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.45, 0.05, 0.25, 1);
  --ease-entry: cubic-bezier(0.16, 0.84, 0.44, 1);

  /* ------------------------------------------------------------ layout */
  --w-broadsheet: 1180px;   /* editorial measure */
  --w-prose:      68ch;     /* reading measure */
  --w-sidebar:    244px;
  --w-app-max:    1560px;

  --touch-min: 44px;        /* WCAG 2.2 target size */

  /* ------------------------------------------------------------ z-index */
  --z-base:    0;
  --z-sticky:  100;
  --z-sidebar: 150;
  --z-drawer:  200;
  --z-bottomnav: 250;
  --z-overlay: 300;
  --z-modal:   320;
  --z-toast:   400;

  /* ==========================================================================
     Naming aliases.
     The component and layout sheets were authored against a shorter
     vocabulary. Rather than scatter renames across ~1200 declarations (a
     specificity/merge hazard for no user-visible gain), the alias layer maps
     them onto the canonical tokens above. Canonical names are the ones
     documented in docs/AWARDRADAR-VISUAL-DIRECTION.md; aliases never hold an
     independent value, so there is exactly one source of truth per decision.
     ========================================================================== */

  /* surfaces & lines */
  --ins-line:        var(--line-ins);
  --ins-line-strong: var(--line-ins-strong);
  --ins-inset:       var(--ins-sunken);
  --bs-rule:         var(--line-bs);
  --bs-rule-strong:  var(--line-bs-strong);

  /* elevation */
  --e-raised:  var(--shadow-md);
  --e-overlay: var(--shadow-lg);
  --e-paper:   var(--shadow-bs);

  /* type */
  --type-data:  var(--type-mono);
  --t-micro:    var(--t-2xs);
  --t-hero:     var(--t-4xl);
  --ls-eyebrow: var(--ls-caps);
  --ls-tighter: var(--ls-display);

  /* measures & layout */
  --measure-ui:        var(--w-prose);
  --measure-editorial: 58ch;
  --max-broadsheet:    var(--w-broadsheet);
  --max-content:       var(--w-app-max);
  --sidebar-w:         var(--w-sidebar);
  --topbar-h:          60px;
  --bottomnav-h:       58px;

  /* motion */
  --m-base:  var(--m-fast);
  --m-data:  var(--m-standard);
  --ease-ui: var(--ease-out);
}

/* Numeric data must align in columns and never reflow between refreshes. */
.num,
.value-hero .amount,
.metric-val,
.table .num,
.mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ==========================================================================
   Reduced motion — global kill switch.
   Every animated affordance must degrade to its end state, never to a
   broken or invisible one. Verified by tests/test_product_experience.py.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}