/* Design tokens.
 *
 * The system rests on three rules:
 *
 *  1. Nothing is rounded, everything is notched. Corners are cut with clip-path
 *     polygons instead of border-radius, which is what makes a card read as an
 *     RPG window rather than a web card.
 *  2. Surfaces are dark blued stone; frames are gold. Panels also carry inner
 *     gold corner brackets (see `.panel__in::after` in base.css) -- that
 *     bracketing is what reads as ornate rather than merely dark.
 *  3. The primary button is gold like the frames, so it is separated from them
 *     by weight rather than by hue: a brighter face, dark ink, a doubled border
 *     and its own corner filigree.
 *
 * Spacing is a 4px scale so every edge lands on a pixel boundary.
 */

:root {
  /* Surfaces: near-black with a cold blue cast, lifting as they rise toward the
   * viewer. Per-player and per-game washes set --deep and are always blended
   * toward --panel rather than painted straight on, so a bright accent cannot
   * punch a hole in the dark palette. */
  --bg: #0b0d15;
  --bg-deep: #06070c;
  --panel: #171a27;          /* the standard card interior */
  --panel-2: #212536;        /* raised: buttons, chips, tiles */
  --panel-3: #2e3446;        /* hover / borders between rows */
  --well: #080a11;           /* recessed wells behind bars and inputs */

  /* Frames. Every panel edge is gold, lit from above. */
  --edge: #b58f3c;           /* the hard outer frame line */
  --edge-bright: #edc674;    /* the lit top bevel of a frame */
  --edge-dim: #6f5219;       /* the shaded underside of a frame */
  --orn: #8a6a26;            /* inner corner brackets: gold, but quieter */
  --bevel: #343c55;          /* inner top highlight on a surface */
  --bevel-dim: #05060a;      /* inner bottom shade on a surface */

  /* Ink: warm parchment on cold stone, which is what stops the dark theme
   * reading as clinical. */
  --ink: #f4eedd;
  --ink-dim: #c3c7da;
  --ink-faint: #8a90a8;

  /* Gold is the accent of record: rank numbers, champion treatment, trophies. */
  --gold: #f2ce56;
  --gold-deep: #b28d28;
  --gold-dark: #2c2208;

  /* The generic "interactive accent": a deep sapphire blue, the one hue in
   * the app that isn't gold, so the active nav item reads as "the accent" at
   * a glance rather than blending into the gold frame system. Every primary
   * button except the LOG GAME CTA uses this. Pulled from a mood-board
   * reference of gold-framed, blue-filled dialogue boxes. */
  --cta: #3f6fa6;
  --cta-bright: #8fc2f0;
  --cta-deep: #1c3552;
  --cta-ink: #f4f8ff;

  /* LOG GAME's own face colour: gold, brighter than the frame gold around it,
   * so the one button meant to demand attention over everything (including
   * the blue accent above) reads as the loudest thing on screen. Darkened a
   * notch from a near-white gold (#f0c246, contrast ~1.5 against the white
   * quill icon) so the icon actually stands out on its face instead of
   * nearly disappearing into it. */
  --hero: #ac810e;
  --hero-bright: #ffe9a3;
  --hero-deep: #8a6413;
  --hero-ink: #241a05;

  --win: #6fc48a;
  --loss: #e0685a;

  /* Spacing: 4px scale. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  /* Frame geometry. --notch is the corner cut; --fw the frame line weight. */
  --notch: 7px;
  --notch-sm: 5px;
  --fw: 3px;

  --shell: 1240px;

  /* Type. One face for UI copy everywhere -- there is no sans fallback in the
   * app at all. A pixel face is much wider per character than a sans, so prose
   * runs at roughly two thirds the size a sans would and leans on a generous
   * line-height to stay readable. If the font fails to load, the fallback is a
   * monospace stack, which stays in character. */
  --font-display: 'Press Start 2P', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* The one deliberate exception: the game's own title, in the header banner
   * and the passcode gate, nowhere else. Pixelmax is a chunky pixel face
   * built for exactly this -- a game logotype, not body copy -- so it falls
   * back to the display face rather than a sans if it fails to load,
   * staying in the same family. */
  --font-fantasy: 'Pixelmax', var(--font-display);

  /* The title's own hot yellow-to-orange gradient, used nowhere else -- every
   * other gold in the app is the cooler, quieter --gold above. This one is
   * deliberately as bright and saturated as the rest of the UI is restrained,
   * because the title is the one place that should look printed, not lit. */
  --title-hi: #fff6cc;
  --title-mid: #ffd24d;
  --title-warm: #ffa726;
  --title-deep: #e8631a;
  --title-edge: #a8420f;

  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);
}