:root {
  --bg: #0c0c0e;
  --surface-1: #151517;
  --surface-2: #1c1c1f;
  --surface-3: #232327;
  --border: #2a2a2e;
  --border-bright: #3a3a3f;
  --text-1: #ece8de;
  --text-2: #a7a195;
  --text-3: #6b665d;
  --text-4: #4a4640;
  --accent: #c89b3c;
  --accent-bright: #d8ad55;
  --accent-dim: #8a6929;
  --warning: #c87a5a;
  --critical: #b85040;
  --positive: #7a9e7e;
  --info: #6b88a3;
  --display: 'Fraunces', Georgia, serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

[data-theme="light"] {
  --bg: #f5f1eb;
  --surface-1: #faf8f4;
  --surface-2: #f0ece6;
  --surface-3: #e8e4de;
  --border: #d8d4cc;
  --border-bright: #c0bdb5;
  --text-1: #2d2b26;
  --text-2: #5a5750;
  --text-3: #7a7770;
  --text-4: #9a9790;
  --accent: #c89b3c;
  --accent-bright: #b88a2c;
  --accent-dim: #e0b560;
  --warning: #c87a5a;
  --critical: #d84030;
  --positive: #5a8e5e;
  --info: #5b78a3;
}

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

html, body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background:
    radial-gradient(ellipse 1200px 800px at 20% 0%, rgba(200, 155, 60, 0.04), transparent 60%),
    radial-gradient(ellipse 800px 600px at 90% 30%, rgba(107, 136, 163, 0.025), transparent 60%),
    var(--bg);
  min-height: 100vh;
}

::selection { background: var(--accent); color: var(--bg); }

/* ============ ANIMATIONS ============ */
.fade-in {
  animation: fadeIn 600ms ease forwards;
  opacity: 0;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

.fade-in.d1 { animation-delay: 80ms; }
.fade-in.d2 { animation-delay: 160ms; }
.fade-in.d3 { animation-delay: 240ms; }
.fade-in.d4 { animation-delay: 320ms; }
.fade-in.d5 { animation-delay: 400ms; }