:root {
  --phi: 1.618;

  /* Core palette from selected Bridge design */
  --color-paper: #f0e8da;
  --color-ink: #0d0d0d;
  --color-copy: #1f1f1f;
  --color-copy-soft: #333333;
  --color-white: #ffffff;

  --color-red: #c62828;
  --color-orange: #d84315;
  --color-yellow: #f9a825;
  --color-green: #2e7d32;
  --color-blue: #1565c0;
  --color-purple: #6a1b9a;

  /* Extended chapter accents from recent design-system recap */
  --color-coral: #e8613a;
  --color-violet: #6b4c9a;
  --color-gold: #c4882e;
  --color-teal: #2e8b8b;

  --border-light: rgba(13, 13, 13, 0.15);
  --border-mid: rgba(13, 13, 13, 0.22);

  /* Golden ratio modular type scale */
  --text--2: 0.618rem;
  --text--1: 0.786rem;
  --text-0: 1rem;
  --text-1: 1.272rem;
  --text-2: 1.618rem;
  --text-3: 2.058rem;
  --text-4: 2.618rem;
  --text-5: 3.333rem;
  --text-6: 4.236rem;

  /* Golden ratio spacing scale */
  --space-1: 0.618rem;
  --space-2: 1rem;
  --space-3: 1.618rem;
  --space-4: 2.618rem;
  --space-5: 4.236rem;
  --space-6: 6.854rem;

  --content-max: min(1320px, calc(100vw - 2.4rem));
  --measure: 62ch;

  --font-display: "Anton", sans-serif;
  --font-body: "Space Grotesk", sans-serif;
  --font-mono: "Space Mono", monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-0);
  line-height: 1.72;
  text-rendering: geometricPrecision;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

@media (max-width: 900px) {
  :root {
    --content-max: min(1320px, calc(100vw - 1.5rem));
  }
}