/* Constitutional Stewardship System — Design Tokens
   All CSS custom properties. No rules here — only values. */

:root {
  /* ── Backgrounds ────────────────────────────────────── */
  --color-bg:        #09090b;
  --color-surface-1: #111117;
  --color-surface-2: #18181f;
  --color-surface-3: #1e1e28;

  /* ── Borders ────────────────────────────────────────── */
  --color-border:    #27272f;
  --color-border-hi: #3a3a4a;

  /* ── Text ───────────────────────────────────────────── */
  --color-text:   #f4f4f6;
  --color-text-2: #a1a1aa;
  --color-text-3: #71717a;
  --color-text-4: #52525b;

  /* ── Brand — Constitutional Indigo ─────────────────── */
  --color-accent:     #6366f1;
  --color-accent-hi:  #818cf8;
  --color-accent-bg:  rgba(99, 102, 241, 0.08);
  --color-accent-bdr: rgba(99, 102, 241, 0.25);

  /* ── Semantic ───────────────────────────────────────── */
  --color-green:      #22c55e;
  --color-green-bg:   rgba(34, 197, 94, 0.08);
  --color-green-bdr:  rgba(34, 197, 94, 0.25);
  --color-red:        #ef4444;
  --color-red-bg:     rgba(239, 68, 68, 0.08);
  --color-red-bdr:    rgba(239, 68, 68, 0.25);
  --color-amber:      #f59e0b;
  --color-amber-bg:   rgba(245, 158, 11, 0.08);
  --color-amber-bdr:  rgba(245, 158, 11, 0.25);
  --color-purple:     #a855f7;
  --color-purple-bg:  rgba(168, 85, 247, 0.08);
  --color-purple-bdr: rgba(168, 85, 247, 0.25);

  /* ── Typography ─────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-base:   1.5;
  --leading-normal: 1.65;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;

  /* ── Spacing (4px base) ─────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── Layout ─────────────────────────────────────────── */
  --section-py:    var(--space-24);
  --section-px:    var(--space-8);
  --content-max:   1200px;
  --prose-max:     680px;
  --nav-height:    64px;

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

  /* ── Shadows ────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.5);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.5);

  /* ── Transitions ────────────────────────────────────── */
  --transition-fast: 120ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 380ms ease;
}