/* ─── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  --white:        #FFFFFF;
  --off-white:    #FAFAFA;
  --surface:      #F4F4F5;
  --border:       #E4E4E7;
  --border-soft:  #F0F0F1;
  --ink:          #111111;
  --ink-2:        #3F3F46;
  --ink-3:        #6B7280;
  --ink-4:        #A1A1AA;
  --accent:       #2D5BE3;
  --accent-soft:  #EEF2FF;
  --accent-hover: #1E46C7;
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    16px;
  --shadow-xs:    0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:    0 1px 4px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  --shadow-md:    0 4px 16px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
  --font-sans:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
  --max-w:        1160px;
  --nav-h:        64px;
  --transition:   all .2s cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] {
  --white:        #0A0A0B;
  --off-white:    #111113;
  --surface:      #1A1A1D;
  --border:       #27272A;
  --border-soft:  #1F1F22;
  --ink:          #FAFAFA;
  --ink-2:        #D4D4D8;
  --ink-3:        #A1A1AA;
  --ink-4:        #71717A;
  --accent:       #6B8EF5;
  --accent-soft:  #1A2150;
  --accent-hover: #8BA4F7;
  --shadow-xs:    0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:    0 1px 4px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.25);
  --shadow-md:    0 4px 16px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
}

/* ─── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-sans);
  background: var(--white);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .3s, color .3s;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }