/* ─────────────────────────────────────────────────────────────────────
   DESIGN TOKENS — graffiti
   Dark product canvas (Linear-inspired): near-black surfaces, a single
   lavender-blue accent, hairline borders, Inter / Geist Mono.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* ─── Surfaces (near-black canvas + 4-step ladder) ─── */
  --canvas:           #010102;   /* deepest page background */
  --surface-1:        #0f1011;   /* cards, panels */
  --surface-2:        #141516;   /* featured / hovered cards */
  --surface-3:        #18191a;   /* sub-nav, dropdowns */
  --surface-4:        #191a1b;   /* deepest lifted */
  --hairline:         #23252a;   /* 1px borders */
  --hairline-strong:  #34343a;
  --hairline-tertiary:#3e3e44;

  /* ─── Text ─── */
  --ink:          #f7f8f8;       /* headlines + emphasized body */
  --ink-muted:    #d0d6e0;       /* secondary */
  --ink-subtle:   #8a8f98;       /* tertiary, captions */
  --ink-tertiary: #62666d;       /* quaternary, footnotes */

  /* ─── Accent (single chromatic hue: lavender-blue) ─── */
  --primary:       #5e6ad2;
  --primary-hover: #828fff;
  --primary-focus: #5e69d1;
  --on-primary:    #ffffff;
  --primary-glow:  rgba(94,106,210,0.45);

  /* ─── Graph / semantic (product-surface colors) ─── */
  --success: #27a644;   /* terminal $/✓, "your code" nodes accent */
  --blue:    #4ea7ff;   /* external nodes */
  --violet:  #8a63d2;   /* tests nodes */

  /* ─── Typography ─── */
  --font-sans: "Inter", -apple-system, "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (Linear-style: aggressive negative tracking on display) */
  --fs-display: clamp(2.75rem, 7vw, 5rem);   /* 44 → 80px hero */
  --fs-2xl:     clamp(2rem, 4.5vw, 3.5rem);  /* 32 → 56px section openers */
  --fs-xl:      clamp(1.6rem, 3vw, 2.5rem);  /* 26 → 40px */
  --fs-headline:1.75rem;   /* 28px */
  --fs-card:    1.375rem;  /* 22px */
  --fs-lg:      1.125rem;  /* 18px body-lg */
  --fs-md:      1rem;      /* 16px body */
  --fs-sm:      0.875rem;  /* 14px */
  --fs-xs:      0.8125rem; /* 13px eyebrow/button */
  --fs-cap:     0.75rem;   /* 12px caption */

  --tr-display: -0.035em;
  --tr-tight:   -0.02em;
  --tr-snug:    -0.01em;
  --tr-eyebrow:  0.04em;
  --tr-wider:    0.12em;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.6;

  /* ─── Layout ─── */
  --max-w:    75rem;   /* ~1200px Linear content width */
  --gutter-x: clamp(1.25rem, 5vw, 3rem);
  --gutter-y: clamp(3.5rem, 9vw, 6rem);

  /* ─── Radius ─── */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-xxl: 24px;
  --r-pill: 9999px;

  /* ─── Spacing (4px base) ─── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-24: 96px;

  /* ─── Motion ─── */
  --easing-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  160ms;
  --dur-base:  280ms;
  --dur-slow:  560ms;

  /* ─── Shadows (used sparingly — Linear leans on the surface ladder) ─── */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 30px rgba(0,0,0,0.5);
  --shadow-pop:  0 20px 60px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);

  /* ─── Legacy aliases (kept so a few inline styles in index.html resolve) ─── */
  --paper:      var(--ink);
  --sub:        var(--ink-subtle);
  --sub-inv:    var(--ink-subtle);
  --sub-inv-2:  var(--ink-tertiary);
  --rule:       var(--hairline);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}