/* ============================================================
   01-tokens.css — Design tokens, auto dark mode, reset, typography
   ============================================================ */

:root {
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --bg: #F5F2EC;
  --bg-elev: #FBF9F4;
  --bg-sunk: #EEEAE1;
  --ink: #1A1815;
  --ink-2: #4A453E;
  --ink-3: #8A847A;
  --line: #D8D2C5;
  --line-2: #E5E0D4;

  --accent: oklch(0.42 0.08 145);
  --accent-soft: oklch(0.42 0.08 145 / 0.10);
  --accent-ink: #FBF9F4;

  --radius: 4px;
  --radius-lg: 8px;

  --space-unit: 1rem;
  --pad-section: 8rem;
  --pad-card: 1.5rem;
  --gap-stack: 1rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F0E0C;
    --bg-elev: #181613;
    --bg-sunk: #08070A;
    --ink: #ECE7DC;
    --ink-2: #A8A296;
    --ink-3: #6B665D;
    --line: #2A2722;
    --line-2: #1F1D19;
    --accent-ink: #0F0E0C;
  }
}

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

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  font-size: 16px;
}

body {
  min-height: 100vh;
  transition: background 0.4s ease, color 0.4s ease;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

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

.serif { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.h-display { font-family: var(--font-display); font-weight: 400; font-size: clamp(3.5rem, 8vw, 7rem); line-height: 0.95; letter-spacing: -0.02em; }
.h-1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.0; letter-spacing: -0.015em; }
.h-2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -0.01em; }
.h-3 { font-size: 1.125rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; }
.body-lg { font-size: 1.125rem; line-height: 1.6; color: var(--ink-2); }
.body { color: var(--ink-2); }
.small { font-size: 0.875rem; color: var(--ink-2); }
.tiny { font-size: 0.75rem; color: var(--ink-3); }

.fade-in { animation: fade-in 0.5s ease both; }
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}