/* Design tokens: the only place with colour values. Warm graphite + copper, one paper section. */
:root {
  --bg: #12151c;
  --bg-2: #161a22;
  --surface: #1a1e27;
  --line: rgba(236, 231, 221, 0.1);
  --grid: rgba(201, 150, 98, 0.05);
  --grid-major: rgba(201, 150, 98, 0.085);
  --fg: #ece7dd;
  --muted: #a7a298;
  --accent: #c99662;
  --accent-soft: #e0b98c;
  --accent-dim: rgba(201, 150, 98, 0.38);
  --on-accent: #16120d;
  --rule: rgba(201, 150, 98, 0.2);
  --header-bg: rgba(18, 21, 28, 0.86);
  --header-line: rgba(201, 150, 98, 0.22);
  --glow: rgba(201, 150, 98, 0.1);

  /* The paper section (Contatti): dark ink on warm paper, copper deep enough for 4.5:1 */
  --paper: #efe9df;
  --paper-2: #e5ded1;
  --ink: #1b1915;
  --ink-muted: #5b564d;
  --ink-accent: #8a5a2b;
  --ink-accent-soft: #6f4722;
  --ink-rule: rgba(27, 25, 21, 0.2);

  /* The sketch sheet: cream paper (the hatch patterns inside the SVG use the same cream), graphite ink */
  --sheet: #f3eee4;
  --sheet-light: #f7f3ea;
  --sheet-dark: #e8e1d3;
  --sheet-ink: #2b2a28;

  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;

  --space: clamp(1rem, 2.5vw, 2rem);
  --section: clamp(4rem, 9vw, 7rem);
  --max: 82rem;
  --header-h: 4.25rem;
  --stage-h: 46svh;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
/* Phone header: 44 px brand target + 2 × 8 px padding + 1 px border, so the stage sticks right under it */
@media (max-width: 34rem) {
  :root { --header-h: 3.8125rem; --stage-h: 45svh; }
}
/* Small phones (360 × 640): leave more of the screen to the reading band under the stage */
@media (max-width: 34rem) and (max-height: 700px) {
  :root { --stage-h: 40svh; }
}

/* Print: browsers drop backgrounds by default, so the ink must be dark on white */
@media print {
  :root {
    --bg: #fff;
    --bg-2: #fff;
    --surface: #fff;
    --header-bg: #fff;
    --fg: #15130f;
    --muted: #4e4a43;
    --accent: #8a5a2b;
    --accent-soft: #6f4722;
    --accent-dim: rgba(138, 90, 43, 0.5);
    --line: rgba(0, 0, 0, 0.18);
    --rule: rgba(0, 0, 0, 0.22);
    --header-line: rgba(0, 0, 0, 0.18);
    --grid: transparent;
    --grid-major: transparent;
    --glow: transparent;
    --paper: #fff;
  }
}