/* ── Design System Tokens ─────────────────────────────────────────────────── */
:root {
  --color-primary:      #2563EB;
  --color-primary-dark: #1D4ED8;
  --color-navy:         #0F172A;
  --color-navy-mid:     #1E293B;
  --color-navy-light:   #334155;
  --color-accent:       #38BDF8;
  --color-success:      #10B981;
  --color-warning:      #F59E0B;
  --color-error:        #EF4444;
  --color-surface:      #F8FAFC;
  --color-surface-mid:  #F1F5F9;
  --color-border:       #E2E8F0;
  --color-border-mid:   #CBD5E1;
  --color-text:         #0F172A;
  --color-text-mid:     #475569;
  --color-text-light:   #94A3B8;
  --color-white:        #FFFFFF;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 12px rgba(15,23,42,0.08), 0 2px 4px rgba(15,23,42,0.04);
  --shadow-lg: 0 12px 32px rgba(15,23,42,0.10), 0 4px 8px rgba(15,23,42,0.06);

  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Fira Code', monospace;
}

/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-surface);
  line-height: 1.5;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }