/* ==========================================================================
   Theme: Creative and studios
   persona: creative · motion: expressive · accent: #1c1f24 (client brand), #bbbcbd dark
   Overrides the tokens in styles.css. Change colours here, then re-run the
   contrast check: every pair must pass WCAG AA in light and dark mode.
   Fonts are self-hosted under the SIL Open Font License (see /fonts/licences).
   ========================================================================== */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(../fonts/space-grotesk-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(../fonts/space-grotesk-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ─────────────────────────────────────────────────────────────────────────
   Mason runs DARK by default: his pages ship with data-theme="dark" on <html>,
   so the dark look paints immediately (no inline script, no flash, CSP-safe)
   and the header toggle switches to light and stores the choice.

   The token structure is the toolkit standard — bare :root is light,
   [data-theme="dark"] is dark — so the contrast checker and the feature
   stylesheets (forms, reviews, …) read a consistent palette per mode. Only the
   accent changes per theme: a deeper orange on white, a brighter one on black.
   Logo switching is left to styles.css (it keys off the same data-theme).
   ──────────────────────────────────────────────────────────────────────── */
:root {
  --font-head: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --head-weight: 700;
  --head-tracking: -0.03em;
  --body-size: 1rem;
  --radius: 4px;
  --ambient: 8%;
  --bg: #fafaf9;
  --surface: #f0efed;
  --border: #e0dedb;
  --field-border: #84817c;
  --text: #111111;
  --text-soft: #44423f;
  --text-dim: #5d5a56;
  --accent: #a0340a;        /* deep rust-orange — passes AA on white and on the ambient tint */
  --accent-ink: #ffffff;
  --brand: #1c1f24;
  --brand-ink: #ffffff;
  --brand-shade: #000000;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ambient: 12%;
    --bg: #0b0b0d; --surface: #151417; --border: #272529; --field-border: #6f6c76;
    --text: #f6f5f3; --text-soft: #c3c0bb; --text-dim: #928f97;
    --accent: #ff5a1e; --accent-ink: #0b0b0d; --brand: #16151a; --brand-ink: #f6f5f3; --brand-shade: #000000;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ambient: 12%;
  --bg: #0b0b0d; --surface: #151417; --border: #272529; --field-border: #6f6c76;
  --text: #f6f5f3; --text-soft: #c3c0bb; --text-dim: #928f97;
  --accent: #ff5a1e;        /* electric orange — links, eyebrows, buttons, focus */
  --accent-ink: #0b0b0d;    /* near-black text on an orange fill (6.8:1) */
  --brand: #16151a;         /* colour panels stay a deep neutral; orange is the pop */
  --brand-ink: #f6f5f3; --brand-shade: #000000;
  color-scheme: dark;
}

/* Expressive motion: pages cross-fade (browsers that support it, Reduce motion off). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }
}