/* Depends on the generated LLTC design-system bundles (the source of truth) being loaded
FIRST — each page s them, in order, right before this file:
shared/tokens/tokens.css (primitives: --color-*, --radius-*, --font-*, --motion-*)
shared/tokens/semantic.css (aliases: --surface-*, --text-*, --action-*, --feedback-*)
shared/tokens/skins.css (active skin overrides: --skin-*)
They're loaded via (not @import here) so the four sheets fetch in PARALLEL — an
@import chain would stall this sheet behind three sequential round-trips (FOUC on load).
The bundles are vendored by `npm run sync:tokens` from docs/lltc-docs/design-system/
tokens/build/css — never hand-edit them; re-sync and commit instead.
─────────────────────────────────────────────────────────────────────────────
LLTC games — shared design foundation ("base template")
─────────────────────────────────────────────────────────────────────────────
The single source of truth for the games' look is the design-system, @imported above.
This file is the games' ADAPTER + component kit: it aliases the generated token names
to the short names the game CSS uses, applies a per-game skin, and defines the branded
component primitives. It matches the landing site (apps/site/app/globals.css) because
both derive from the same tokens.
Consumed by BOTH thin static clients (controller + screen) via a plain , so
there's no build step (same zero-install spirit as loading the Colyseus SDK from a
CDN). Fonts (Anton / Public Sans / Courier Prime / Saira Stencil One) are loaded via
in each page's .
Layers:
1. brand-primitive aliases — short names over the generated color / font / radius tokens.
2. semantic aliases — game names over the design-system semantic layer;
a game skin retargets THESE, never the components.
3. per-game skin hooks — [data-game="…"] on shifts the aliases.
4. component kit — branded, game-agnostic primitives shared across phases
and (Pass 2) the home/game-select screen.
Values NOT in the token set (pressed-state darkens, hairline alphas, background tints)
stay as local literals, flagged inline. Game-specific phase classes (.opt, .banner,
the screen's .g-*) live in each page's own