:root {
  --basalt: #1a1917;
  --charcoal: #252320;
  --clay: #3d3832;
  --moss: #5c7a5c;
  --sage: #8fa88f;
  --sand: #c4b8a8;
  --parchment: #e8e2d9;
  --gold: #b8956a;
  --ember: #c47d5a;
  --success: #6b9b6b;

  --bg: var(--basalt);
  --surface: var(--charcoal);
  --surface-elevated: #2e2b27;
  --border: var(--clay);
  --text: var(--parchment);
  --text-muted: var(--sand);
  --accent: var(--moss);
  --accent-light: var(--sage);
  --highlight: var(--gold);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; color: var(--text-muted); }

a {
  color: var(--accent-light);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover { color: var(--parchment); }

.mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
  letter-spacing: -0.02em;
}

.text-gold { color: var(--gold); }
.text-moss { color: var(--sage); }
.text-muted { color: var(--text-muted); }