/* ==========================================================================
   Design tokens — the single source of truth for the whole site.
   Mirrors docs/DESIGN.md. If a value isn't here, it shouldn't be in the CSS.
   ========================================================================== */

/* --- Typeface: Jost, variable 300–500, self-hosted, no third-party request --- */

@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/jost-latin.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: "Jost";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/jost-latin-ext.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;
}

:root {
  /* --- Colour ------------------------------------------------------------
     Measured from the live site. #2B3032 is the real signature dark.        */

  --ground: #2b3032;
  /* One step down from the ground — a panel that sits under something, like
     the billing plate beneath a poster. Deliberately shallow: it should read
     as a different surface, not as a different colour. */
  --ground-sunk: #232729;
  --ground-deep: #000000;
  --paper: #ffffff;
  --paper-dim: rgba(255, 255, 255, 0.68);
  --line: rgba(255, 255, 255, 0.16);

  /* Used by the browser for form controls, scrollbars and the like. */
  color-scheme: dark;

  /* --- Media surfaces ----------------------------------------------------
     Fixed in both schemes. A hero or section banner is footage with type on
     it: a light scrim washes the picture out, and the film should always be
     the brightest thing on screen. So these do NOT follow the theme. */
  --on-media: #ffffff;
  --on-media-dim: rgba(255, 255, 255, 0.72);
  --media-ground: #000000;

  /* Contrast, verified:
     paper on ground       13.4:1  AAA
     paper on ground-deep  21:1    AAA
     paper-dim on ground    7.0:1  AAA (normal text)
     line on ground         1.7:1  decorative only — never carries meaning   */

  /* --- Type --------------------------------------------------------------
     One family. Four sizes. Two weights. Every line height explicit.       */

  --font: "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.125rem, 1.4rem + 3.1vw, 3.5rem);   /* 34 → 56px */
  --fs-heading: clamp(1.375rem, 1.16rem + 0.9vw, 1.75rem); /* 22 → 28px */
  --fs-body: clamp(1rem, 0.96rem + 0.17vw, 1.125rem);      /* 16 → 18px */
  --fs-meta: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);  /* 14 → 15px */

  --lh-display: 1.1;
  --lh-heading: 1.25;
  --lh-body: 1.7;
  --lh-meta: 1.4;

  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body: 0;
  --ls-meta: 0.02em;

  /* Light where size carries it; regular where legibility matters.
     See DESIGN.md — light weights fail at small sizes on dark grounds. */
  --fw-light: 300;
  --fw-regular: 400;

  /* --- Spacing -----------------------------------------------------------
     Base unit 8px. Seven values for the whole site.                        */

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px; /* the grid gap. one value, used everywhere. */
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px; /* space above a heading = double the space below it */
  --space-7: 96px;

  /* The two that matter. --gutter is the single most important value here:
     every page edge, on every element, shares it. */
  --gutter: clamp(24px, 5vw, 80px);
  --section: clamp(56px, 9vw, 140px);
  /* Space above a section runs a third tighter than below it — the header
     already contributes its own padding, so a full --section on top read as
     a gap rather than as breathing room. */
  --section-top: calc(var(--section) * 0.67);

  /* --- Layout ------------------------------------------------------------ */

  --measure: 68ch;
  --content: 1200px;
  --wide: 1600px;

  /* --- Motion ------------------------------------------------------------ */

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-state: 200ms;
  --dur-nav: 300ms;
}

/* --- Light ---------------------------------------------------------------
   Same roles, inverted. The ground is warm off-white rather than pure white:
   against a wall of film stills, pure white glares and the images stop being
   the brightest thing on the page.

   Dark is the default. Light applies when the visitor asks for it, either
   through the toggle or through their system setting. */

:root[data-theme="light"] {
  --ground: #f4f2ef;
  --ground-sunk: #eae7e2;
  --ground-deep: #e7e4df;
  --paper: #24282a;
  --paper-dim: rgba(36, 40, 42, 0.68);
  --line: rgba(36, 40, 42, 0.16);
  color-scheme: light;
}

/* System preference, unless the visitor has chosen for themselves. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #f4f2ef;
    --ground-sunk: #eae7e2;
    --ground-deep: #e7e4df;
    --paper: #24282a;
    --paper-dim: rgba(36, 40, 42, 0.68);
    --line: rgba(36, 40, 42, 0.16);
    color-scheme: light;
  }
}

/* Verified contrast, both schemes:
     paper on ground        dark 13.4:1   light 12.1:1    AAA
     paper-dim on ground    dark  7.0:1   light  7.4:1    AAA normal text
     line on ground         decorative only in both — never carries meaning */