*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --font-display: 'Fraunces', Georgia, serif;
  --font-ui: 'Instrument Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', 'Courier New', monospace;
  --r: 7px;
  --r-lg: 12px;
  --t: 180ms ease;
}

[data-theme="light"] {
  --bg: #ECF6F3;
  --surface: #F6FCFB;
  --surface-2: #DCEEE9;
  --border: #C2DAD4;
  --border-mid: #96BDB4;
  --text: #122E28;
  --text-2: #274F46;
  --text-muted: #5A8880;
  --accent: #12806E;
  --accent-bg: rgba(18, 128, 110, 0.1);
  --red: #C04040;
  --red-bg: rgba(192, 64, 64, 0.08);
  --green: #186A48;
  --green-bg: rgba(24, 106, 72, 0.08);
  --blue: #1E5EA8;
  --blue-bg: rgba(30, 94, 168, 0.08);
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 3px 12px rgba(0,0,0,0.05);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.14);
  --overlay: rgba(10, 28, 24, 0.4);
  --header-bg: rgba(236, 246, 243, 0.88);
}

[data-theme="dark"] {
  --bg: #091915;
  --surface: #0F2420;
  --surface-2: #162E29;
  --border: #1C3832;
  --border-mid: #28524A;
  --text: #CCE9E2;
  --text-2: #7BBFB2;
  --text-muted: #3E7268;
  --accent: #38C8B0;
  --accent-bg: rgba(56, 200, 176, 0.13);
  --red: #E87070;
  --red-bg: rgba(232, 112, 112, 0.1);
  --green: #3ABB88;
  --green-bg: rgba(58, 187, 136, 0.1);
  --blue: #4A98DC;
  --blue-bg: rgba(74, 152, 220, 0.1);
  --shadow: 0 1px 2px rgba(0,0,0,0.5), 0 3px 12px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.6);
  --overlay: rgba(0, 0, 0, 0.7);
  --header-bg: rgba(9, 25, 21, 0.88);
}

html { font-size: 15px; }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  transition: background var(--t), color var(--t);
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin { to { transform: rotate(360deg); } }