/* ==========================================================================
   SenzFusion redesign — css/tokens.css
   Design Spec 2.0.0 · Design system: Binance.US (user-selected)
   White trust canvas alternating with near-black #222126 bands, Binance Yellow
   #F0B90B as the single brand accent, pill CTAs, whisper 5% card shadows,
   Focus Blue #1EAEDB as the universal hover-shift and keyboard focus colour.
   EVERY raw colour / size / space / motion value lives here. Other
   stylesheets reference these custom properties only.

   Two layers:
     1. Binance.US schema tokens (--bg, --fg, --accent, --text-*, --space-*,
        --radius-*, --elev-*, --motion-*, --container-*) named exactly as in
        design-systems/binance/tokens.css. Deviations are commented inline.
     2. The existing project token API (--c-*, --fs-*, --s-*, --r-*, --dur-*,
        --focus-*) — names frozen, values re-mapped to the new spec. Other
        builders depend on these names; never rename them.

   Contrast (audited, WCAG 2.x):
     ink #1E2026 on white 16.3:1 · on snow #F5F5F5 15.0:1
     fg-2 #32313A on white 12.6:1 · steel #686A6C on white 5.4:1 (snow 5.0:1)
     white on #222126 16.0:1 · #ADAFB2 on #222126 7.3:1 · on #2B2F36 6.1:1
     ink on yellow #F0B90B 9.0:1 · ink on Focus Blue #1EAEDB 6.3:1
     yellow #F0B90B text on #222126 8.9:1 (dark grounds only — NEVER on light)
   Yellow text on white fails (1.8:1): accent-coloured text on light uses ink.
   Crypto Red #F6465D on white is 3.3:1: red is used for borders / icons only,
   error copy stays ink.
   ========================================================================== */

:root {
  /* ======================================================================
     1. Binance.US schema tokens
     ====================================================================== */

  /* ---- Surface ---------------------------------------------------------- */
  /* NOTE: --bg / --fg are ALSO re-set per band by base.css band classes
     (.band-light / .band-raised / .band-dark) as component variables meaning
     "background / foreground of the current band". That is intentional and
     consistent with the schema meaning; the :root values are the page canvas. */
  --bg: #FFFFFF;                       /* Pure White — primary page canvas */
  --surface: #FFFFFF;                  /* White cards on light sections */
  --surface-warm: #F5F5F5;             /* Snow — input bg, alternating rows */

  /* ---- Foreground ramp -------------------------------------------------- */
  --fg: #1E2026;                       /* Ink — primary text, headings */
  --fg-2: #32313A;                     /* Secondary — nav links, descriptive copy */
  /* DEVIATION: DS binds --muted to Slate #848E9C, which is 3.3:1 on white and
     fails body-text 4.5:1. --muted is Steel #686A6C (5.5:1 on white). Slate is
     kept as --slate for dark grounds and data annotation only. */
  --muted: #686A6C;                    /* Steel — metadata, captions on light */
  --slate: #848E9C;                    /* Slate — dark grounds / data only */
  --meta: #777E90;                     /* Muted — tertiary text; >=18px or dark-adjacent only */

  /* ---- Border ----------------------------------------------------------- */
  --border: #E6E8EA;                   /* Border Light — cards, sections */
  --border-soft: #F0F1F2;              /* Softer inner row separator */

  /* ---- Accent ----------------------------------------------------------- */
  --accent: #F0B90B;                   /* Binance Yellow — the ONLY brand accent */
  --accent-on: #1E2026;                /* Ink label on yellow */
  --accent-hover: #1EAEDB;             /* Focus Blue — signature hover hue-shift */
  --accent-active: #D0980B;            /* Active Yellow — pressed */

  /* ---- Semantic --------------------------------------------------------- */
  --success: #0ECB81;                  /* Crypto Green */
  --warn: #EAB308;                     /* schema default (DS has no warn tier) */
  --danger: #F6465D;                   /* Crypto Red — borders / icons on light */

  /* ---- Typography ------------------------------------------------------- */
  /* DEVIATION: BinancePlex is proprietary and not loadable here; IBM Plex Sans
     (loaded via Google Fonts on every page) is the substitute, Arial the DS
     fallback. Mono uses IBM Plex Mono (loaded) instead of the DS system stack
     so telemetry / spec read-outs render consistently. */
  --font-display: BinancePlex, "IBM Plex Sans", Arial, sans-serif;
  --font-body: BinancePlex, "IBM Plex Sans", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --text-xs: 11px;                     /* Tiny — micro-labels */
  --text-sm: 14px;                     /* Caption — metadata, nav */
  --text-base: 16px;                   /* Body, buttons */
  --text-lg: 20px;                     /* Body Large / H4 */
  --text-xl: 24px;                     /* H2/H3 feature headings */
  --text-2xl: 28px;                    /* H1 section headings */
  --text-3xl: 34px;                    /* Display Secondary */
  --text-4xl: 60px;                    /* Display Hero */

  --leading-body: 1.5;
  --leading-tight: 1.0;                /* DS headings 1.00; site uses --lh-tight 1.08 for multi-line h1 */
  --tracking-display: 0;

  /* ---- Spacing ---------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  --section-y-desktop: 80px;
  --section-y-tablet: 48px;
  --section-y-phone: 32px;

  /* ---- Radius ----------------------------------------------------------- */
  --radius-sm: 8px;                    /* inputs, data cards */
  --radius-md: 12px;                   /* content cards, panels */
  --radius-lg: 24px;                   /* hero imagery, video, model stage */
  --radius-pill: 9999px;               /* pill CTAs */

  /* ---- Elevation -------------------------------------------------------- */
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 3px 5px 0 rgba(32, 32, 37, 0.05);

  /* ---- Focus ------------------------------------------------------------ */
  /* NAME COLLISION: the DS ships --focus-ring as a box-shadow. This project's
     --focus-ring is an outline shorthand consumed by base.css, so it stays an
     outline value (below). The DS box-shadow variant is exposed as
     --focus-shadow for components that need a ring without an outline. */
  --focus-shadow: 0 0 0 2px #1EAEDB;

  /* ---- Motion ----------------------------------------------------------- */
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ---- Layout ----------------------------------------------------------- */
  --container-max: 1200px;
  --container-gutter-desktop: 32px;
  --container-gutter-tablet: 16px;
  --container-gutter-phone: 16px;

  /* ======================================================================
     2. Project token API (frozen names, Spec 2.0.0 values)
     ====================================================================== */

  /* ---- Palette ---------------------------------------------------------- */
  --c-night: #222126;                                          /* Binance Dark — dark bands, footer */
  --c-panel: #2B2F36;                                          /* Dark Card — panels, dark cards */
  --c-panel-raised: color-mix(in srgb, #2B2F36, #FFFFFF 6%);   /* raised surface inside a panel */
  --c-line-dark: color-mix(in srgb, #2B2F36, #FFFFFF 12%);     /* hairline on dark */
  --c-on-dark: #FFFFFF;                                        /* text on dark, 15.9:1 */
  --c-on-dark-muted: #ADAFB2;                                  /* ~white 70% over dark; 7.3:1 night, 6.1:1 panel */
  --c-surface: #FFFFFF;                                        /* light band canvas */
  --c-surface-raised: #F5F5F5;                                 /* Snow — raised light band, inputs */
  --c-ink: #1E2026;                                            /* Ink */
  --c-ink-muted: #686A6C;                                      /* Steel, 5.5:1 on white */
  --c-hair: #E6E8EA;                                           /* Border Light */
  --c-signal: #F0B90B;                                         /* Binance Yellow — fills, bars, dots, dark-ground text */
  --c-signal-ink: #1E2026;                                     /* accent-coloured TEXT on light = ink (yellow text fails on white) */
  /* sensor / estimate semantic channels (diagrams, legends, traces) */
  --c-imu: #848E9C;                                            /* Slate */
  --c-radar: #0ECB81;                                          /* Crypto Green */
  --c-thermal: #F6465D;                                        /* Crypto Red */
  --c-estimate: #1EAEDB;                                       /* Focus Blue */
  /* status */
  --c-danger: #F6465D;                                         /* border / icon only on light */
  --c-success: #0ECB81;                                        /* border / icon only on light */

  /* (+) derived helpers */
  --c-signal-hover: #1EAEDB;                                   /* Focus Blue hover fill; text on it stays ink (6.3:1) */
  --c-signal-active: #D0980B;                                  /* (+) Active Yellow pressed fill */
  --c-signal-tint: color-mix(in oklab, #F0B90B, #FFFFFF 82%);  /* (+) yellow chip tint on light, ink text */
  --c-ink-strong: #1A1A1A;                                     /* (+) nav hover (never lighter) */
  --c-field-line: #80858E;                                     /* input boundary on light, 3.7:1 white / 3.4:1 snow */
  --c-field-line-dark: #848E9C;                                /* Slate — input boundary on dark, 4.0:1 vs #2B2F36 */
  --c-ghost-line: rgba(255, 255, 255, 0.3);                    /* (+) ghost button border on dark */
  --c-ghost-fill: rgba(255, 255, 255, 0.08);                   /* (+) ghost button hover fill on dark */
  --c-scrim: rgba(30, 32, 38, 0.4);                            /* drawer backdrop */
  --c-glow-1: #F0B90B;                                         /* (+) golden glow — behind product imagery only */
  --c-glow-2: #F8D12F;                                         /* (+) golden glow outer */

  /* ---- Fonts ------------------------------------------------------------ */
  /* --font-display / --font-body / --font-mono defined in schema layer above. */
  --stretch-display: 100%;          /* (+) kept for API stability; no stretch in Spec 2.0.0 */
  --fw-regular: 400;                /* (+) */
  --fw-medium: 500;                 /* (+) body weight */
  --fw-semibold: 600;               /* (+) buttons, nav */
  --fw-bold: 700;                   /* (+) headings */

  /* ---- Type scale ------------------------------------------------------- */
  --fs-12: .75rem;
  --fs-14: .875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-22: 1.375rem;
  --fs-28: 1.75rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-64: 3.75rem;                 /* 60px — DS Display Hero ceiling */
  --fs-h1: clamp(2.25rem, 5.5vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.125rem);
  --fs-10: .6875rem;                /* (+) 11px — brand sub-line / micro labels */
  --fs-11: .6875rem;                /* (+) 11px */
  --fs-15: .875rem;                 /* (+) desktop nav links: 14px per DS */
  --fs-17: 1rem;                    /* (+) body size >= 1024px: 16px per DS */
  --fs-20: 1.25rem;                 /* (+) lede / drawer links */

  --lh-body: 1.5;
  --lh-tight: 1.08;
  --lh-h2: 1.1;                     /* (+) */
  --lh-snug: 1.3;                   /* (+) item titles, labels */
  --lh-lede: 1.45;                  /* (+) */
  --lh-mono: 1.5;                   /* (+) mono micro text */
  --measure: 68ch;
  --measure-lede: 60ch;             /* (+) */

  --ls-display: 0;                  /* (+) headings — DS: no negative tracking */
  --ls-eyebrow: .08em;              /* (+) */
  --ls-label: .08em;                /* (+) panel heads, mono labels */
  --ls-control: 0;                  /* (+) segmented buttons */
  --ls-brand: .02em;                /* (+) wordmark */

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;
  --s-half: 2px;                    /* (+) hairline gaps, segmented padding */
  --s-input-x: 14px;                /* (+) input inline padding */
  --section-pad: 80px;

  /* ---- Layout ----------------------------------------------------------- */
  --content-max: 1200px;
  --gutter: 24px;
  --page-pad: 32px;
  --header-h: 64px;

  /* (+) component metrics */
  --bw: 1px;                        /* hairline border width */
  --bw-strong: 2px;                 /* emphasis / error border width */
  --touch: 44px;                    /* minimum touch target */
  --touch-sm: 40px;                 /* .btn-sm on fine pointers only */
  --btn-h: 48px;                    /* (+) pill button height */
  --btn-pad-x: 28px;                /* (+) pill button inline padding */
  --seg-h: 40px;                    /* segmented button height (fine pointer) */
  --control-h: 48px;                /* input / select height */
  --textarea-h: 140px;
  --logo: 32px;                     /* header brand mark */
  --check: 20px;                    /* checkbox box */
  --thumb: 24px;                    /* range thumb */
  --track: 4px;                     /* range track */
  --dot-size: 8px;                  /* .dot */
  --dot-sm: 6px;                    /* .panel-head .status dot */
  --spinner: 14px;                  /* busy button spinner */
  --chip-y: 3px;                    /* (+) chip / badge block padding */
  --chip-x: 10px;                   /* (+) chip / badge inline padding */
  --bar: 2px;                       /* (+) current-page indicator bar */
  --underline: 2px;                 /* (+) link underline */
  --underline-hover: 3px;           /* (+) link underline hover */
  --underline-offset: 4px;          /* (+) */
  --z-header: 50;

  /* ---- Radii ------------------------------------------------------------ */
  --r-chip: 9999px;
  --r-control: 8px;
  --r-panel: 12px;
  --r-pill: 9999px;
  --r-media: 24px;
  --r-mark: 2px;                    /* (+) tiny legend swatches that must read as squares */

  /* ---- Elevation -------------------------------------------------------- */
  --elev-card: 0 3px 5px 0 rgba(32, 32, 37, .05);
  --elev-hover: 0 3px 5px 5px rgba(8, 8, 8, .05);
  --elev-pill: rgb(153, 153, 153) 0 2px 10px -3px;   /* (+) DS pill CTA shadow */

  /* ---- Motion ----------------------------------------------------------- */
  --dur-fast: 150ms;
  --dur-enter: 200ms;
  --dur-exit: 150ms;
  --ease-out: cubic-bezier(.2, 0, 0, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --stagger: 40ms;
  --dur-spin: 800ms;                /* (+) busy spinner rotation */
  --reveal-shift: 12px;             /* (+) .reveal start offset */
  --drawer-shift: 8px;              /* (+) drawer enter offset */
  --nudge: 3px;                     /* (+) arrow icon hover translate */

  /* ---- Focus ------------------------------------------------------------ */
  --focus-width: 2px;               /* (+) */
  --focus-ring: 2px solid #1EAEDB;                    /* Focus Blue outline — every band */
  --focus-ring-light: 2px solid #1EAEDB;              /* (+) light bands — same Focus Blue */
  --focus-offset: 2px;
}

@media (max-width: 1023px) {
  :root {
    --section-pad: 48px;
    --page-pad: 16px;
  }
}

@media (max-width: 639px) {
  :root {
    --section-pad: 32px;
  }
}