/* ─── PartyLink landing — the design tokens ──────────────────────────────────
 *
 * ONE definition of the site's colour, type and spacing, for all twelve pages.
 *
 * WHY THIS FILE EXISTS. Before it, the landing site had three separate and
 * disagreeing palettes: the React SPA (`src/styles/index.css` + a tailwind
 * theme) said the background was #0a0c10; the seven hand-written documents each
 * carried their OWN <style> block saying #0c0e12; and the five catalog pages
 * inherited a third copy from a `SHARED_CSS` string hardcoded inside
 * `packages/server/scripts/generate-games-page.ts`. Twelve pages, twelve
 * stylesheets, no shared token between any of them — so every redesign was a
 * twelve-way manual edit, and the generated five silently reverted to the old
 * palette on the next build.
 *
 * HOW IT IS CONSUMED. It is a real file served from /tokens.css, which is what
 * lets both kinds of page use it:
 *   • the static pages `<link rel="stylesheet" href="/tokens.css">` it;
 *   • the generator emits that same link instead of its own palette block;
 *   • the SPA imports it, and the tailwind theme reads these variables rather
 *     than restating hex values.
 *
 * Changing a colour here changes the whole site, including the generated pages,
 * and survives a rebuild. That is the entire point.
 *
 * NAMING. Everything is prefixed `--pl-` on purpose. The GAMES use bare
 * `--accent`, and an unprefixed token here would leak into any page that ever
 * embeds one.
 */

/* ─── The faces ──────────────────────────────────────────────────────────────
 *
 * The @font-face rules live HERE, in the same file as the `--pl-font-*` stacks
 * that name them, because splitting the two is exactly how this broke before:
 * the catalog pages linked tokens.css — which NAMES Inter and Bricolage —
 * without ever loading the faces, so the site's five busiest SEO pages silently
 * rendered in the system stack while every other page did not. Nothing renders
 * a name without also fetching the file now, and a new page that links
 * /tokens.css (which check:tokens forces it to) is correct by construction.
 *
 * SELF-HOSTED, not Google. Every page used to open a connection to
 * fonts.googleapis.com and fonts.gstatic.com. On a site carrying a cookie
 * banner and a privacy policy that is a third party seeing the IP of everyone
 * who reads the privacy policy — and it was the ONLY third-party request those
 * twelve static pages made. Serving the bytes ourselves removes it, drops two
 * DNS+TLS handshakes off the critical path, and puts the landing site on the
 * same footing as packages/host and packages/controller, which have always
 * self-hosted via @fontsource.
 *
 * THE FILES. Copied verbatim out of the @fontsource-variable packages pinned in
 * packages/landing/package.json; `npm run sync:fonts` re-copies them after a
 * version bump. They are committed because the twelve static pages have NO
 * build step — they are plain HTML and cannot import from node_modules, so the
 * faces have to exist at a real URL. The SPA deliberately reads these same
 * files rather than importing the packages, so the two halves cannot drift.
 *
 * WHAT IS AND IS NOT IN THEM.
 *   • VARIABLE weight axes, so one file per family covers every weight the site
 *     asks for (Inter 400–700, JetBrains Mono 400–500, Bricolage Grotesque 400–800)
 *     with no faux-bolding and no per-weight downloads.
 *   • LATIN subset only. The rendered copy is English; the only non-ASCII
 *     characters anywhere on the site are — – · © × → and the first five are
 *     latin. Cyrillic, Greek, Vietnamese and latin-ext are dropped: they were
 *     never requested, and shipping them would roughly double the bytes.
 *   • NORMAL only, no italic file. `.doc em` is synthesised — which is what
 *     already happened, since the old Google request never asked for an ital
 *     axis either. Real italics would be an improvement, but a 50KB one for two
 *     <em>s, and this change is about how fonts load, not which ones.
 *
 * `swap` on all three: the text must be readable while 111KB of font is in
 * flight. `block` would leave the page blank, which is strictly worse than the
 * CDN this replaces.
 *
 * The family names are the plain ones — "Inter", not @fontsource's "Inter
 * Variable" — so the `--pl-font-*` stacks below stay exactly as they were and
 * every page that already asked for Inter keeps getting Inter.
 *
 * No `unicode-range`: it exists to stop a browser downloading the Cyrillic file
 * for an English page, and there is one file per family here, so there is
 * nothing to choose between. A character the file does not carry falls back
 * glyph-by-glyph on its own. */

@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-variations");
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
  /* ── Surfaces, darkest to lightest ────────────────────────────────────────
   * (T24) Retuned to the shipped TOTALLY+ chrome — `packages/shared/src/
   * theme.ts`'s `TOTALLY_PLUS` object, the single source of truth T48 built
   * for exactly this reason. `--pl-bg`/`--pl-surface`/`--pl-surface-2`/
   * `--pl-surface-3` are `bgBase`/`bgSurface`/`bgCard`/`bgInner` verbatim.
   * `--pl-surface-4` has no fourth rung in `Theme` (nothing on the platform
   * currently reads past `bgInner`) — it is a landing-only extra rung, kept
   * at the same proportional step above `--pl-surface-3` it always sat at,
   * and now used for exactly one thing: the index hero's browse-mockup
   * focused tile (`.browse-mock__tile--focus` in `src/styles/index.css`).
   * The OLD base (#0a0c10 vs the seven
   * documents' independently-typed #0c0e12) was two disagreeing near-blacks
   * with a cyan cast; the new ladder is one warm-neutral scale with none. */
  --pl-bg: #0a0a0c;
  --pl-surface: #131316;
  --pl-surface-2: #151518;
  --pl-surface-3: #1f1f23;
  --pl-surface-4: #2a2a2e;

  /* ── Ink ───────────────────────────────────────────────────────────────────
   * (T24) `theme.ts` already carries a three-step text ladder — `textPrimary`/
   * `textSecondary`/`textDim` — that maps directly onto this file's `text`/
   * `dim`/`muted` roles, so these are its literal values rather than an
   * opacity computed against the old cyan-tinted `--pl-text`. */
  --pl-text: #f4f2ef;
  --pl-dim: #9b9992;
  --pl-muted: #63615c;

  /* ── Brand ─────────────────────────────────────────────────────────────────
   * (T24) ACHROMATIC, per the corrected brief at the top of
   * docs/tickets/streaming-reskin/T24-landing-alignment.md: the platform
   * ground is warm-neutral near-black with WHITE as the one hue-free accent,
   * because ~70 games with ~70 palettes mean any platform hue competes with
   * all of them. `--pl-accent` is `theme.ts`'s `accent` (white) verbatim —
   * this replaces the cyan/pink pair the site used to carry as "the one place
   * platform cyan is still correct", which stopped being true the moment the
   * product went achromatic. `--pl-accent-2`/`--pl-accent-3` are `accentDeep`,
   * a dimmer neutral rather than a second hue, so the handful of places that
   * alternate between "the accent" and "the other brand colour" (a lobby
   * chip, a two-stop gradient wire) keep their two-tone rhythm without
   * reintroducing one. `--pl-on-accent` is `accentInk` — dark text on the now-
   * white fill, in place of the teal-on-cyan pairing this used to need. */
  --pl-accent: #f4f2ef;
  --pl-accent-2: #c9c6c0;
  --pl-accent-3: #c9c6c0;
  --pl-on-accent: #0a0a0c;

  /* ── Gold — the wordmark's "+", and NOTHING else ─────────────────────────
   * (T24) `theme.ts`'s `accentWarm`. This is the platform's one hue, and it
   * is spent in exactly one place: the "+" in the TOTALLY+ lockup on the
   * index hero. It must never become a second general-purpose accent — see
   * `--pl-accent-2` above for how the site gets visual variety without one. */
  --pl-gold: #e8b23c;

  /* ── Lines ─────────────────────────────────────────────────────────────────
   * (T24) `theme.ts`'s `borderStrong`/`borderDefault` — translucent white
   * rather than a solid cyan-tinted grey, so a hairline reads as "light over
   * this surface" rather than carrying its own tint. */
  --pl-border: rgba(255, 255, 255, 0.2);
  --pl-border-soft: rgba(255, 255, 255, 0.1);

  /* ── Type ──────────────────────────────────────────────────────────────────
   * The static pages fell back to the system stack while the SPA asked for
   * Inter, so a visitor moving from the home page to the privacy page changed
   * typeface. Same stack everywhere now. */
  --pl-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* T68: was Space Grotesk. The product — every TV screen and every phone —
     has always set its display type in Bricolage Grotesque
     (`packages/shared/src/theme.ts` FONT_DISPLAY, loaded by both
     `packages/host/src/styles/fonts.css` and the controller's copy), so the
     marketing site was the one surface headlining in a face the product does
     not own. This ends that drift; it removes a font from the project rather
     than adding one. */
  --pl-font-display: "Bricolage Grotesque", var(--pl-font-sans);
  --pl-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Measure and rhythm ──────────────────────────────────────────────────
   * Two column widths: prose is narrow enough to read, the catalog is wide
   * enough to grid. These were 760px and 1080px in two unrelated files. */
  --pl-measure-prose: 760px;
  --pl-measure-wide: 1080px;
  --pl-gutter: 24px;

  --pl-radius-sm: 8px;
  --pl-radius: 12px;
  --pl-radius-lg: 20px;

  /* Elevation on a near-black page cannot be done with a small dark blur —
   * there is nothing darker to cast. These are long, soft and offset downward
   * so the light reads as coming from above the screen. */
  --pl-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.5);
  /* A glow, not a halo: tight to the element and thrown downward, so a filled
   * accent button looks lit rather than blurred. (T24) Colour swapped from
   * cyan/pink to the white accent and its dimmer neutral twin — same alpha
   * shape, no hue. */
  --pl-glow-accent: 0 8px 28px -8px rgba(244, 242, 239, 0.35);
  --pl-glow-accent-2: 0 8px 28px -8px rgba(201, 198, 192, 0.35);
}

/* The site is dark-only and says so, rather than letting the browser guess and
 * render form controls and scrollbars in a light theme over a black page. */
:root {
  color-scheme: dark;
}