/* ─── Design Tokens — Dark B theme (always active) ─────────────────────── */
:root {
  /* Surface colors */
  --t-bg:          #0A0B0F;
  --t-bg-alt:      #13151B;
  --t-card:        #13151B;
  --t-chip:        rgba(244, 244, 242, 0.06);

  /* Text colors */
  --t-ink:         #F4F4F2;
  --t-ink-dim:     #A0A5AE;
  --t-ink-muted:   #6E737C;

  /* Border colors */
  --t-line:        rgba(244, 244, 242, 0.10);
  --t-line-strong: rgba(244, 244, 242, 0.20);

  /* Brand & status colors */
  --t-accent:  oklch(0.72 0.13 248);
  --t-signal:  oklch(0.60 0.14 158);
  --t-warn:    oklch(0.72 0.14 70);
  --t-crit:    oklch(0.55 0.17 25);

  /* Nav scrolled background: t.bg at ~80% opacity */
  --t-bg-scrolled: #0A0B0FCC;

  /* Typography */
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Spacing */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-28: 112px;
  --sp-30: 120px;

  /* Border radius */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  14px;
  --radius-3xl:  16px;
  --radius-full: 999px;

  /* Max widths */
  --max-w-site:    1550px;
  --max-w-content: 1300px;
  --max-w-page:    1280px;
  --max-w-narrow:  1100px;
  --max-w-medium:  1200px;
  --max-w-text:    1000px;

  /* Z-index layers */
  --z-nav:   40;
  --z-modal: 1000;

  /* Transitions */
  --tr-fast:   0.15s ease;
  --tr-normal: 0.25s ease;
  --tr-slow:   0.55s cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Shadows */
  --shadow-modal:   0 30px 80px rgba(0, 0, 0, 0.35);
  --shadow-card:    0 12px 32px rgba(0, 0, 0, 0.25);
  --shadow-popover: 0 20px 50px rgba(0, 0, 0, 0.18);
}