/* =====================================================================
   Tech Cheat Codes: DESIGN TOKENS (single source of truth)
   Theme: Direction 1 "Clear Signal" (brand-directions/directions.md)
   ---------------------------------------------------------------------
   Every other stylesheet reads these custom properties. To retheme,
   edit ONLY this file (and swap the font files referenced below).
   Contrast (WCAG 2.1, from directions.md / contrast.py):
     white on Signal Blue 5.52 · Ink on white 17.85 · Slate on white 7.58
     Slate on Mist 7.0 · Ink on Mist 16.48 · Teal on white 5.47
     Ink on Amber 10.04 · Teal on mint tint 4.95
   ===================================================================== */

/* ---- Self-hosted fonts (SIL OFL, from @fontsource) ---- */
@font-face { font-family: "Plus Jakarta Sans"; src: url("/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* ---- Brand palette (raw) ---- */
  --signal-blue: #2F5BEA;
  --signal-blue-deep: #1F3FB0;   /* keycap shadow / pressed */
  --signal-blue-tint: #EEF2FE;
  --ink: #0F172A;
  --ink-2: #1E293B;
  --ink-3: #334155;
  --slate: #475569;
  --slate-light: #CBD5E1;        /* text on Ink only (11.9:1) */
  --white: #FFFFFF;
  --mist: #F3F6FB;
  --line: #E2E8F0;
  --mint: #5EEAD4;               /* decorative only on light; text OK on Ink */
  --teal: #0F766E;
  --mint-tint: #E6F7F4;
  --amber: #F5B83D;
  --amber-tint: #FEF6E4;

  /* ---- Color roles ---- */
  --color-bg: var(--white);
  --color-surface: var(--mist);
  --color-surface-raised: var(--white);
  --color-surface-sunken: var(--line);
  --color-surface-dark: var(--ink);
  --color-surface-dark-2: var(--ink-2);
  --color-border: var(--line);
  --color-border-strong: #94A3B8;
  --color-border-dark: var(--ink-3);

  --color-text: var(--ink);
  --color-text-muted: var(--slate);
  --color-text-inverse: var(--white);
  --color-text-on-dark-muted: var(--slate-light);

  --color-primary: var(--signal-blue);
  --color-primary-strong: var(--signal-blue-deep);
  --color-primary-soft: var(--signal-blue-tint);
  --color-on-primary: var(--white);
  --color-accent: var(--teal);
  --color-accent-decor: var(--mint);
  --color-accent-soft: var(--mint-tint);

  --color-deal: var(--amber);
  --color-deal-soft: var(--amber-tint);
  --color-on-deal: var(--ink);

  --color-pick: var(--amber);           /* "Our pick" badge */
  --color-on-pick: var(--ink);
  --color-pick-box: var(--signal-blue-tint);
  --color-easy: var(--teal);
  --color-easy-soft: var(--mint-tint);
  --color-pro: var(--signal-blue);
  --color-pro-soft: var(--signal-blue-tint);
  --color-skip: var(--slate);
  --color-skip-soft: var(--mist);
  --color-breaking: #B91C1C;            /* white on it 6.47 */

  /* Disclosure: body-text colour, >= 4.5:1, never faint grey */
  --color-disclosure-bg: var(--mist);
  --color-disclosure-text: var(--ink);
  --color-disclosure-border: var(--line);
  --color-disclosure-icon: var(--signal-blue);

  /* Site-wide bar */
  --color-bar-bg: var(--ink);
  --color-bar-text: var(--white);
  --color-bar-muted: var(--slate-light);
  --color-bar-link: var(--mint);

  /* Focus ring: 2px Signal Blue */
  --focus-ring-color: var(--signal-blue);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ---- Typography ---- */
  --font-heading: "Plus Jakarta Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-size-2xs: 0.6875rem;   /* 11px mono labels */
  --font-size-xs: 0.8125rem;    /* 13px */
  --font-size-sm: 0.9375rem;    /* 15px */
  --font-size-base: 1.0625rem;  /* 17px */
  --font-size-lg: 1.25rem;      /* 20px */
  --font-size-xl: 1.375rem;     /* 22px card titles */
  --font-size-2xl: clamp(1.75rem, 3vw, 2.625rem);   /* 42px section titles */
  --font-size-3xl: clamp(2.5rem, 5.4vw, 4.25rem);   /* 68px hero */
  --font-size-page: clamp(2.25rem, 4.4vw, 3.5rem);  /* 56px page titles */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --line-height-tight: 1.08;
  --line-height-snug: 1.3;
  --line-height-base: 1.6;
  --letter-spacing-heading: -0.02em;
  --letter-spacing-caps: 0.06em;

  /* ---- Spacing ---- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 5.5rem;

  /* ---- Layout ---- */
  --container-max: 75rem;   /* 1200px */
  --container-pad: 2rem;
  --content-max: 47.5rem;   /* 760px article column */
  --header-height: 4.75rem;

  /* ---- Radii ---- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-width: 1px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
  --shadow-card: 0 10px 30px -16px rgb(15 23 42 / 0.2);
  --shadow-path: 0 10px 30px -12px rgb(15 23 42 / 0.13);
  --shadow-hover: 0 16px 34px -14px rgb(15 23 42 / 0.28);

  /* ---- Gradients / decoration ---- */
  --hero-gradient: linear-gradient(180deg, var(--mist) 0%, var(--white) 100%);
  --hero-glow: radial-gradient(circle, rgb(94 234 212 / 0.33), transparent 65%);

  /* ---- Motion ---- */
  --motion-duration-fast: 150ms;     /* card hover, CTA colour */
  --motion-duration-toggle: 200ms;   /* Easy/Pro thumb + crossfade */
  --motion-duration-nudge: 700ms;    /* one-time logo chevron nudge */
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-hover-lift: -2px;
  --motion-mode-rise: 4px;

  /* ---- Easy/Pro toggle geometry ---- */
  --toggle-width: 7.5rem;
  --toggle-height: 2.375rem;
  --toggle-padding: 3px;

  /* ---- Partner logo slot (5:2) ---- */
  --logo-slot-width: 120px;
  --logo-slot-height: 48px;
  --logo-slot-padding: 8px;
}

@media (max-width: 600px) {
  :root { --container-pad: 1.25rem; --space-3xl: 3.5rem; }
}

/* Respect reduced motion everywhere: zero out all motion tokens. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 0ms;
    --motion-duration-toggle: 0ms;
    --motion-duration-nudge: 0ms;
    --motion-hover-lift: 0px;
    --motion-mode-rise: 0px;
  }
}