/* tokens.css: colour, type and spacing tokens. Dark theme only. */
@font-face {
  font-family: "Outfit Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/outfit-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url("/assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
}

:root {
  --color-bg: #0e0e0e;
  --color-ink: #202020;
  --color-cream: #f4f0ec;
  --color-yellow: #e8d87c;
  --color-teal: #94d0d8;
  --color-mint: #90d0b8;
  --color-coral: #d48c8c;
  /* Secondary text: captions, subtitles, table detail, footer. About 7:1 on the background. */
  --color-muted: rgb(244 240 236 / 0.65);

  /* One accent per section, used only in small hits (underline, border, focus, tag). */
  --accent: var(--color-yellow);

  /* Gallery frame and monocle ring: a 1.5px line standing 3px off the edge. */
  --frame-radius: 4px;
  --frame-line: rgb(244 240 236 / 0.32);
  --ring-width: 1.5px;
  --ring-gap: 3px;

  /* --pad is the side padding: 16px on phones, growing to 64px. --gutter is the body gutter:
     --pad, or wider so content sits in a centred --content-max column. Full-bleed blocks
     cancel --gutter with negative margins, so they still reach the screen edge. */
  --pad: clamp(16px, 5vw, 64px);
  --content-max: 1200px;
  /* 100vw, not 100%: a percentage would resolve against whichever box uses the token. */
  --gutter: max(var(--pad), (100vw - var(--content-max)) / 2);
  /* Sticky header height: 12px padding x2 + 52px mark. base.css, section.css and wall.css read this. */
  --header-h: 76px;
  --font: "Outfit Variable", system-ui, sans-serif;
  /* Accent words only, always italic: a flourish inside a sentence, never body text. */
  --font-serif: "Instrument Serif", Georgia, serif;

  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.75rem;
  --step-3: clamp(2.5rem, 6vw + 1rem, 6rem);

  /* Section panel: each section page tints its content panel; these are the defaults.
     --panel-accent (links and marks inside the panel) falls back to --accent where it is used. */
  --panel: #171717;
  --panel-ink: var(--color-cream);
  --panel-muted: var(--color-muted);
  --panel-rule: rgb(244 240 236 / 0.14);

  /* Backing for the round blurred header controls (mark, back, contact, nav pill). */
  --control-bg: rgb(14 14 14 / 0.55);
  --control-bg-hover: rgb(14 14 14 / 0.85);
}

/* Green room: bottle green and warm cream, the coming-soon landing page's palette (set on <html>
   by base.njk). The accents are warmed a touch to sit on the green; the wordmark follows them
   (wall.css). */
:root[data-palette="green-room"] {
  --color-bg: #16261e;
  --color-cream: #efe8d8;
  --color-muted: rgb(239 232 216 / 0.68);
  --color-ink: #34413a; /* rules and borders: the cream at 14% over the green */
  --color-coral: #e3a08f;
  --color-yellow: #d9bf6a;
  --color-mint: #a3d4b6;
  --frame-line: rgb(239 232 216 / 0.32);
  --control-bg: rgb(0 0 0 / 0.35);
  --control-bg-hover: rgb(0 0 0 / 0.6);
}

/* Each section takes its own colour: Studio a deep teal-black, Effects the pink of the
   Scoop & Scream enclosure (dark ink on a light panel), Joe a warm, darkened yellow. */
body[data-section="studio"] {
  --accent: var(--color-teal);
  --panel: #0f1c1e;
  --panel-rule: rgb(148 208 216 / 0.2);
}
body[data-section="effects"] {
  --accent: var(--color-coral);
  --panel: #e7b7b2;
  --panel-ink: #231213;
  --panel-muted: rgb(35 18 19 / 0.72);
  --panel-rule: rgb(35 18 19 / 0.16);
  --panel-accent: #7c2f31;
}
body[data-section="joe"] {
  --accent: var(--color-yellow);
  --panel: #1d190e;
  --panel-rule: rgb(232 216 124 / 0.2);
}