/* ==========================================================================
   KND-LINE — Design Tokens
   Asphalt (mass) · Chalk (light) · Hi-Vis orange (the signal) · Lane yellow (the line)
   Variable names are shared with the base framework (ink / parch / brass).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Karantina:wght@300;400;700&family=Heebo:wght@200;300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* -- Palette ---------------------------------------------------------- */
  /* Logo colours: sky blue #4090d0 on near-black #101010 */
  --ink-950: #0b0c0f;
  --ink-900: #101114;
  --ink-850: #15171b;
  --ink-800: #1b1e24;
  --ink-700: #272b33;
  --ink-600: #363c47;
  --navy-700: #0f1418;
  --navy-600: #1b222a;

  --parch-50: #f9fafc;
  --parch-100: #f1f3f6;
  --parch-200: #e2e6ec;
  --parch-300: #c7cfd8;

  --brass-300: #86bdeb;
  --brass-400: #5ea4de;
  --brass-500: #4090d0;
  --brass-600: #2f72aa;
  --brass-glow: rgba(64, 144, 208, 0.38);
  --warn-400: #5ea4de;

  --slate-500: #6b7384;
  --slate-300: #aeb5c3;

  /* -- Semantic --------------------------------------------------------- */
  --bg: var(--ink-950);
  --bg-2: var(--ink-900);
  --bg-3: var(--ink-850);
  --bg-4: var(--ink-800);
  --bg-light: var(--parch-100);
  --bg-light-2: var(--parch-50);

  --fg: var(--parch-100);
  --fg-2: #b3b8c0;
  --fg-3: #767c86;
  --fg-on-light: var(--navy-700);
  --fg-on-light-2: #424a54;

  --accent: var(--brass-500);
  --accent-hi: var(--brass-400);

  --line: rgba(241, 243, 246, 0.1);
  --line-2: rgba(241, 243, 246, 0.18);
  --line-on-light: rgba(15, 20, 24, 0.12);

  --glass: rgba(16, 17, 20, 0.55);
  --glass-light: rgba(241, 243, 246, 0.06);

  /* -- Type ------------------------------------------------------------- */
  --font-sans: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Karantina', 'Heebo', sans-serif;
  --font-grotesk: 'Space Grotesk', 'Heebo', sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  --t-display-xl: clamp(3.6rem, 9vw + 0.5rem, 9.5rem);
  --t-display-l: clamp(3rem, 6vw + 0.5rem, 6.4rem);
  --t-display-m: clamp(2.2rem, 3.4vw + 0.5rem, 4rem);
  --t-h3: clamp(1.2rem, 1.1vw + 0.7rem, 1.6rem);
  --t-lead: clamp(1.05rem, 0.5vw + 0.85rem, 1.28rem);
  --t-body: clamp(0.95rem, 0.2vw + 0.85rem, 1.05rem);
  --t-small: 0.85rem;
  --t-label: 0.72rem;
  --t-numeric: clamp(3rem, 6vw, 6rem);

  --lh-tight: 0.95;
  --lh-snug: 1.05;
  --lh-base: 1.65;
  --lh-relaxed: 1.85;

  --ls-tight: 0;
  --ls-wide: 0.12em;
  --ls-xwide: 0.24em;

  /* -- Space ------------------------------------------------------------ */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 6.5rem; --s-10: 9rem;

  --section-y: clamp(4.5rem, 9vw, 9rem);
  --page-x: clamp(1.1rem, 4.5vw, 4rem);
  --max-w: 1380px;
  --max-w-narrow: 860px;
  --max-w-prose: 72ch;

  /* -- Shape ------------------------------------------------------------ */
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

  /* -- Elevation -------------------------------------------------------- */
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-md: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
  --sh-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
  --sh-glow: 0 0 40px var(--brass-glow);

  /* -- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --d-fast: 180ms;
  --d-base: 360ms;
  --d-slow: 800ms;

  --header-h: 76px;

  /* -- Brand motifs ----------------------------------------------------- */
  --hazard: repeating-linear-gradient(135deg, var(--brass-500) 0 12px, var(--ink-950) 12px 24px);
  --lane: repeating-linear-gradient(90deg, var(--brass-400) 0 34px, transparent 34px 60px);
  --lane-soft: repeating-linear-gradient(90deg, rgba(241, 243, 246, 0.22) 0 18px, transparent 18px 32px);
}