/* ============================================================================
 * Kids of the North — design tokens
 * Source of truth: BUILD-PLAN-v2.md §1 (Brand system).
 * These are REAL brand values, not placeholders. Tune the palette against the
 * actual brand PNGs once they land in /assets/img (see TODO in ROADMAP M1).
 * Everything brand-level (color/type/motion) lives here; styles.css consumes it.
 * ========================================================================== */

:root {
  /* ── Palette (§1) ──────────────────────────────────────────────────────
     Aurora gradient stops must stay WITHIN this range — see CLAUDE.md brand rule. */
  --bg:           #07090C;  /* near-black, faint blue cast — page base */
  --bg-2:         #0E141B;  /* raised surface (cards, sheets) */
  --ice:          #BFE6FF;  /* frost white-blue — type highlights */
  --blue:         #1E90FF;  /* primary electric blue — mascot, CTAs */
  --blue-deep:    #0A3D7A;  /* shadow blue */
  --cyan:         #5FD0FF;  /* specular / aurora peak */
  --accent-pink:  #E8A6C0;  /* secondary accent — used sparingly */
  --text:         #EAF2F8;  /* default body text */
  --muted:        #6B7C8C;  /* secondary / meta text */

  /* Derived / convenience (alpha variants for atmosphere & overlays) */
  --blue-rgb:     30 144 255;     /* for rgb(var(--blue-rgb) / <alpha>) */
  --cyan-rgb:     95 208 255;
  --ice-rgb:      191 230 255;
  --bg-rgb:       7 9 12;
  --grain-opacity: 0.04;          /* film grain over aurora (§5.2) */
  --camo-opacity:  0.06;          /* snow-camo section texture (§1) */

  /* ── Aurora gradient stops (cyan → blue → violet, in-palette) ──────────── */
  --aurora-1: #5FD0FF;            /* cyan peak */
  --aurora-2: #1E90FF;            /* electric blue */
  --aurora-3: #3A2E7A;            /* violet edge — kept dark/desaturated to stay "north" */

  /* ── Type (§1) ─────────────────────────────────────────────────────────
     Display headlines: heavy condensed face that can sit beside the graffiti
       wordmark artwork without competing (Anton / Druk-like / Monument Extended).
     Body/UI/labels: clean grotesque or mono (Space Grotesk / Geist Mono).
     Self-hosted woff2 from /assets/fonts with font-display: swap (see @font-face
     stubs in styles.css and the font checklist in /assets/fonts/README.md). */
  --font-display: "Styra", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Styra", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "Geist Mono", monospace;

  /* Type scale (fluid; clamp tuned for mobile-first, CLS < 0.05 — reserve space) */
  --step--1: clamp(0.83rem, 0.78rem + 0.2vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.93rem + 0.3vw, 1.13rem);
  --step-1:  clamp(1.33rem, 1.18rem + 0.7vw, 1.78rem);
  --step-2:  clamp(1.78rem, 1.45rem + 1.6vw, 2.81rem);
  --step-3:  clamp(2.37rem, 1.74rem + 3.1vw, 4.45rem);
  --step-4:  clamp(3.16rem, 1.98rem + 5.9vw, 7.04rem);  /* hero headline */

  --leading-tight: 1.04;
  --leading-body:  1.55;
  --tracking-display: -0.01em;
  --tracking-label:    0.12em;  /* mono labels / eyebrows */

  /* ── Spacing / layout ──────────────────────────────────────────────────── */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  3.5rem;
  --space-2xl: 6rem;
  --measure:   68ch;            /* max readable line length */
  --container:  1200px;
  --radius:     14px;
  --radius-sm:  8px;
  --hairline:   rgb(var(--ice-rgb) / 0.10);

  /* ── Motion (§5 "Timing law": slow, deliberate, cinematic — emergence) ──── */
  --ease-emerge: cubic-bezier(0.16, 1, 0.30, 1);  /* expo-out: rises, settles */
  --ease-inout:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   240ms;
  --dur-med:    600ms;
  --dur-slow:   1200ms;
  --dur-intro:  3200ms;          /* full North-Star intro budget (§5.1) */

  /* ── Z-index scale ───────────────────────────────────────────────────────
     aurora canvas sits behind content; intro overlay sits above everything. */
  --z-aurora:   0;
  --z-content:  10;
  --z-nav:      40;
  --z-cursor:   60;
  --z-intro:    100;
}

/* Static fallback when motion is reduced (§4.4) — aurora freezes to a still. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med:  0ms;
    --dur-slow: 0ms;
    --dur-intro: 0ms;
  }
}