/* ─── DESIGN TOKENS — "Developer's Notebook" ────────────────── */
:root {

  /* ── Color Palette ── */
  --cream:        #F4ECD8;   /* Main background — aged notebook */
  --cream-warm:   #FFF9E6;   /* Card hover background           */
  --ink:          #1A1A1A;   /* Body text, headers              */
  --faded-blue:   #4A7C9D;   /* Links, interactive elements     */
  --graphite:     #6B6B6B;   /* Secondary text, metadata        */
  --postit:       #FFE66D;   /* CTAs, highlights, active states */

  /* Accent (use sparingly) */
  --signal-red:     #E63946; /* Warnings, in-progress badges    */
  --terminal-green: #06FFA5; /* Live indicators, success        */
  --sketch-purple:  #9D4EDD; /* Special callouts, easter eggs   */

  /* Derived */
  --grid-line:    rgba(26, 26, 26, 0.06);
  --shadow-ink:   rgba(26, 26, 26, 0.20);
  --shadow-ink-h: rgba(26, 26, 26, 0.12);

  /* ── Typography ── */
  --font-mono:  'Space Mono', 'Courier New', monospace;
  --font-body:  'Inter', 'IBM Plex Sans', sans-serif;
  --font-code:  'Courier Prime', 'Courier New', monospace;

  /* ── Spacing Scale ── */
  --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;

  /* ── Layout ── */
  --max-width:    1100px;
  --nav-height:   60px;
  --section-gap:  var(--sp-8);

  /* ── Borders ── */
  --border-dashed: 2px dashed var(--ink);
  --border-solid:  2px solid  var(--ink);

  /* ── Radius ── */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* ── Transitions ── */
  --t-fast:   0.12s ease;
  --t-normal: 0.25s ease;
  --t-slow:   0.4s  ease;

  /* ── Z-index layers ── */
  --z-grain:    0;
  --z-content:  1;
  --z-nav:      100;
  --z-ink:      200;
}