/* ============================================================
   UNLINKED — Design tokens.
   Single source of truth for color, type, spacing, motion.
   Dark-mode native, warm-leaning, builder-first.
   ============================================================ */

:root {
  /* ---------- COLOR · Surfaces ---------- */
  --bg:           #0A0A0B;
  --bg-elev:      #131316;     /* primary card */
  --bg-elev-2:    #1C1C20;     /* hover / nested */
  --bg-elev-3:    #25252A;     /* modal / popover */

  /* Compatibility aliases — older code calls these `--surface*`. */
  --surface:      var(--bg-elev);
  --surface-hi:   var(--bg-elev-2);
  --surface-hi2:  var(--bg-elev-3);

  /* ---------- COLOR · Text ---------- */
  --text:         #F5F5F0;     /* primary */
  --text-dim:     #8E8E93;     /* secondary */
  --text-mute:    #5A5A60;     /* metadata */
  --text-faint:   #3A3A40;     /* disabled */

  /* ---------- COLOR · Borders ---------- */
  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-hi:     var(--border-strong);   /* alias */
  --border-accent: rgba(255, 107, 53, 0.30);

  /* ---------- COLOR · Accent (ember orange) ---------- */
  --accent:       #FF6B35;
  --accent-hi:    #FF8456;     /* hover */
  --accent-glow:  #FFA66B;
  --accent-deep:  #C44A1F;
  --accent-soft:  rgba(255, 107, 53, 0.12);
  --accent-haze:  rgba(255, 107, 53, 0.06);

  /* ---------- COLOR · Semantic ---------- */
  --success:      #4ADE80;
  --success-soft: rgba(74, 222, 128, 0.12);
  --danger:       #F87171;
  --danger-soft:  rgba(248, 113, 113, 0.12);
  --info:         #60A5FA;
  --info-soft:    rgba(96, 165, 250, 0.12);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-body:    'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'JetBrains Mono', monospace;

  --t-xs:    13px;
  --t-sm:    14px;
  --t-base:  15px;
  --t-body:  17px;
  --t-lg:    19px;
  --t-xl:    22px;
  --t-2xl:   28px;
  --t-3xl:   36px;
  --t-4xl:   48px;
  --t-5xl:   64px;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:    0.05em;
  --tracking-mono:    0.10em;

  /* ---------- SPACING (4-px grid) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- RADIUS ---------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.20);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.35);
  --shadow-lg:   0 12px 32px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 32px rgba(255, 107, 53, 0.25);

  /* ---------- MOTION ---------- */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   400ms;

  /* ---------- LAYOUT ---------- */
  --max-w:        1480px;
  --max-w-read:   720px;
  --rail-left:    300px;
  --rail-right:   340px;
  --gap-grid:     32px;
  --topnav-h:     76px;
}