/* =============================================================
   design.css — Centralized Design Controller
   All tokens live here. Every other file references these vars.
   ============================================================= */

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

:root {

  /* ── Colors ─────────────────────────────────────────────── */
  --color-bg:           #0c0c0c;
  --color-bg-alt:       #0f0f0f;
  --color-surface:      #141414;
  --color-surface-hi:   #1a1a1a;
  --color-border:       #242424;
  --color-border-hi:    #333333;
  --color-muted:        #3a3a3a;

  --color-text-primary:   #f0ede8;
  --color-text-secondary: #8a8580;
  --color-text-tertiary:  #504d49;

  --color-accent:       #f05a1a;
  --color-accent-soft:  #f05a1a26;  /* accent @ 15% opacity */
  --color-accent-dim:   #f05a1a0d;  /* accent @ 5% opacity  */
  --color-accent-hover: #ff6a2a;

  /* Terminal block palette */
  --color-terminal-bg:      #0a0a0a;
  --color-terminal-border:  #1e1e1e;
  --color-terminal-header:  #161616;
  --color-terminal-green:   #39d353;
  --color-terminal-yellow:  #e3b341;
  --color-terminal-blue:    #58a6ff;
  --color-terminal-red:     #f85149;

  /* ── Typography ─────────────────────────────────────────── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Type scale */
  --text-2xs:  0.55rem;
  --text-xs:   0.65rem;
  --text-sm:   0.78rem;
  --text-base: 0.92rem;
  --text-md:   1.05rem;
  --text-lg:   1.2rem;
  --text-xl:   1.45rem;
  --text-2xl:  1.75rem;
  --text-3xl:  clamp(2.2rem, 4.5vw, 3.25rem);
  --text-hero: clamp(2.5rem, 5.5vw, 4rem);

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.55;
  --leading-loose:  1.75;

  /* Letter spacing */
  --tracking-tight: -0.03em;
  --tracking-base:  -0.01em;
  --tracking-wide:  0.05em;
  --tracking-wider: 0.1em;

  /* ── Spacing ─────────────────────────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* ── Layout ─────────────────────────────────────────────── */
  --max-width:       1100px;
  --max-width-prose: 680px;
  --nav-height:      56px;
  --section-gap:     var(--sp-12);
  --gutter:          clamp(var(--sp-5), 4vw, var(--sp-8));

  /* ── Borders & Radius ────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  --border-hairline: 1px solid var(--color-border);
  --border-hi:       1px solid var(--color-border-hi);
  --border-accent:   1px solid var(--color-accent);

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 0 20px rgba(240, 90, 26, 0.15);

  /* ── Motion ─────────────────────────────────────────────── */
  --duration-fast:   120ms;
  --duration-base:   220ms;
  --duration-slow:   380ms;
  --duration-reveal: 600ms;
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.45, 0, 0.55, 1);

  /* ── Z-index layers ──────────────────────────────────────── */
  --z-base:    1;
  --z-float:   10;
  --z-nav:     100;
  --z-overlay: 200;
}