/* SkillGeek design tokens — the single source of truth for the whole system.
   Every value here is justified in DESIGN-SYSTEM.md. Templates reference tokens only;
   no literal hex and no literal px belongs in a template.

   Contrast is machine-verified: `python3 tools/palette.py` -> 21/21 PASS, exit 0. */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk.woff2') format('woff2-variations');
  font-weight: 300 700;                 /* variable font: one file covers the range */
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

:root {
  /* ---- brand: crimson, sampled from the logo (77.9% of its pixels) ---- */
  --brand-50:#FAF2F5;  --brand-100:#F6DFE7; --brand-200:#F2BACD; --brand-300:#EF85A8;
  --brand-400:#EC5084; --brand-500:#E71D60; --brand-600:#C61550; --brand-700:#A01341;
  --brand-800:#781234; --brand-900:#520F25;

  /* ---- accent: navy, sampled from SkillGeek's own training graphics ---- */
  --accent-50:#F1F1F6;  --accent-100:#D9DBED; --accent-300:#4B5AD3;
  --accent-500:#172592; --accent-600:#0D1763; --accent-700:#070E45; --accent-900:#050A30;

  /* ---- neutrals: cool, pulled toward the navy hue. No pure #000 / #FFF ---- */
  --n-0:#FBFBFB;  --n-50:#F6F6F6;  --n-100:#ECEDEE; --n-200:#DCDDDF; --n-300:#C4C6CA;
  --n-400:#A1A4AA; --n-500:#7E818C; --n-600:#656872; --n-700:#4C4F57; --n-800:#33353B;
  --n-900:#202125; --n-950:#141517;

  /* ---- semantic ---- */
  --bg:              var(--n-0);
  --bg-subtle:       var(--n-50);
  --bg-dark:         var(--accent-900);
  --ink:             var(--n-900);
  --ink-muted:       var(--n-600);
  --ink-inverse:     var(--n-0);
  --action:          var(--brand-600);
  --action-hover:    var(--brand-700);
  --link:            var(--brand-700);
  --border:          1px solid var(--n-200);          /* decorative hairline */
  --border-interactive: 1px solid var(--n-500);       /* form controls: WCAG 1.4.11 */
  --focus:           var(--accent-700);
  --focus-on-dark:   var(--brand-400);

  /* ---- type ---- */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.5rem, 1.6rem + 3.8vw, 4.25rem);
  --fs-h1:      clamp(2rem,   1.5rem + 2.1vw, 3.25rem);
  --fs-h2:      clamp(1.625rem, 1.35rem + 1.2vw, 2.375rem);
  --fs-h3:      clamp(1.3125rem, 1.22rem + 0.4vw, 1.6875rem);
  --fs-lg:      clamp(1.125rem, 1.1rem + 0.1vw, 1.25rem);
  --fs-base:    clamp(1rem, 0.98rem + 0.08vw, 1.0625rem);
  --fs-sm:      clamp(0.875rem, 0.86rem + 0.05vw, 0.9375rem);
  --fs-xs:      0.8125rem;
  --fs-chip:    0.75rem;

  --lh-tight: 1.05;
  --lh-head:  1.15;
  --lh-body:  1.65;
  --measure:  68ch;

  /* ---- spacing: strict 8px scale (4px is the single half-step) ---- */
  --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;

  /* ---- radius ---- */
  --radius-sm:8px; --radius:14px; --radius-lg:20px; --radius-full:999px;

  /* ---- elevation: hover and modal ONLY. Cards have no resting shadow. ---- */
  --shadow-hover: 0 6px 20px -6px rgb(32 33 37 / .16);
  --shadow-modal: 0 20px 50px -12px rgb(32 33 37 / .28);

  /* ---- layout ---- */
  --container: 1240px;
  --container-narrow: 760px;
  --gutter: var(--sp-5);

  /* ---- motion ---- */
  --dur-fast:150ms; --dur:200ms; --dur-slow:250ms;
  --ease: cubic-bezier(.2,.7,.3,1);
}

@media (min-width:768px){ :root{ --gutter: var(--sp-6); } }
@media (min-width:1024px){ :root{ --gutter: 40px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}