/* ─────────────────────────────────────────────
   Shutterring — Design Tokens
   ───────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Surfaces — dark primary */
  --bg-0: #0B0B0C;          /* page */
  --bg-1: #131315;          /* card / nav */
  --bg-2: #1B1B1E;          /* hover, modal */
  --bg-3: #25252A;          /* input, divider-strong */
  --line:  rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.16);

  /* Text */
  --text-0: #F4F2EE;        /* warm off-white, primary */
  --text-1: #B8B4AC;        /* secondary */
  --text-2: #7A7770;        /* muted / metadata */
  --text-3: #4A4844;        /* deep muted */

  /* Accent — darkroom red */
  --accent: oklch(0.58 0.14 25);
  --accent-soft: oklch(0.58 0.14 25 / 0.14);
  --accent-ink: #1A0A0A;

  /* Type stacks */
  --font-display: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-sans:    'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-serif:   'Instrument Serif', Cambria, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Type scale */
  --t-display: clamp(72px, 12vw, 220px);
  --t-h1: 56px;
  --t-h2: 36px;
  --t-h3: 22px;
  --t-body: 16px;
  --t-small: 13px;
  --t-micro: 11px;

  /* Tracking */
  --track-tight: -0.04em;
  --track-snug: -0.02em;
  --track-wide: 0.08em;
  --track-mono: 0.04em;

  /* Radius / motion */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* ── Base reset ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--text-0);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  font-feature-settings: "ss01", "ss02", "cv11";
}
.sr-mono  { font-family: var(--font-mono); letter-spacing: var(--track-mono); }
.sr-serif { font-family: var(--font-serif); }

/* Hairline */
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }