/* ============================================================
   BlueSystm — tokens.css
   Single source of truth for the brand's design language.
   Approved via the Foundations Playground · 2026-07-13
   Consumed by the live site and all Design components.
   Change a token here — the whole site updates in lockstep.
   ============================================================ */

:root {
  /* color */
  --blue: #2563EB;
  --blue-hover: #1D4FD7;
  --bg: #FAFBFF;
  --card: #FFFFFF;
  --dark: #0B1022;
  --body: #3D4254;
  --muted: #6B7084;
  --border: #E2E4EC;
  --green: #34D399;
  --yellow: #FBB724;
  --red: #EF4444;         /* errors only */

  /* tints — the only legal soft backgrounds */
  --blue-tint: rgba(37,99,235,.10);
  --green-tint: rgba(52,211,153,.12);
  --yellow-tint: rgba(251,183,36,.14);
  --frost: rgba(250,251,255,.82);   /* frosted glass, navbar only */
  --ring: 0 0 0 3px rgba(37,99,235,.18);   /* THE focus ring */

  /* type — one variable family */
  --font-sans: 'Satoshi', system-ui, -apple-system, sans-serif;
  --ls-tight: -0.03em; --ls-snug: -0.02em; --ls-wide: 0.10em;   /* 3 trackings, total */
  --fs-display: clamp(64px, 6.5vw, 88px); --lh-display: 1.02; --ls-display: var(--ls-tight); --fw-display: 800;
  --fs-h1: 52px;  --lh-h1: 1.05; --ls-h1: var(--ls-tight); --fw-h1: 800;
  --fs-h2: 40px;  --lh-h2: 1.08; --ls-h2: var(--ls-snug); --fw-h2: 700;
  --fs-h3: 28px;  --lh-h3: 1.15; --ls-h3: var(--ls-snug); --fw-h3: 700;
  --fs-h4: 21px;  --lh-h4: 1.30; --ls-h4: var(--ls-snug); --fw-h4: 600;
  --fs-lead: 18px; --lh-lead: 1.5; --fw-lead: 400;
  --fs-body: 16px; --lh-body: 1.6; --fw-body: 400;
  --fs-small: 14px; --lh-small: 1.5; --fw-small: 500;
  --fs-eyebrow: 12px; --lh-eyebrow: 1.4; --ls-eyebrow: var(--ls-wide); --fw-eyebrow: 600;

  /* elevation */
  --e1: 0 1px 3px rgba(11,16,34,.06);
  --e2: 0 2px 8px rgba(11,16,34,.06), 0 8px 24px rgba(11,16,34,.06);
  --e3: 0 14px 40px rgba(11,16,34,.08), 0 2px 8px rgba(37,99,235,.05);
  --e4: 0 28px 70px rgba(11,16,34,.11), 0 6px 18px rgba(37,99,235,.08);
  --glow: 0 0 40px rgba(37,99,235,.35), 0 0 80px rgba(37,99,235,.12);

  /* surface — panel card treatment (gradient fill, hairline ink border, top inset highlight, no drop shadow) */
  --panel: linear-gradient(158deg, #EEF1F8 0%, #E3E8F2 100%);
  --panel-border: rgba(11,16,34,.08);
  --panel-inset: inset 0 1px 0 rgba(255,255,255,.7);

  /* spacing — the only gaps allowed */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

  /* layout */
  --container: 1120px; --gutter: 32px; --measure: 65ch;

  /* radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 9999px;

  /* z-index */
  --z-base: 0; --z-sticky: 100; --z-overlay: 200; --z-toast: 300;

  /* motion */
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --dur-micro: 160ms; --dur-fast: 240ms; --dur-base: 340ms; --dur-entrance: 600ms;
  --travel: 24px;   /* THE entrance distance — everything rises the same amount */
  --drift: 40;      /* signature ambient marquee speed, px per second — one per page, max */
}