/* ==========================================================================
   THEME · Neutral / Reference (default)
   --------------------------------------------------------------------------
   Every visual value the kit uses comes from these tokens. Components never
   hard-code colours, fonts, radii or motion. To re-skin for a game, copy
   tokens.example.css, change values, and register it in theme/themes.js.
   Platform behaviour (screens, navigation, states) is unaffected.
   ========================================================================== */
:root,
[data-theme="neutral"] {
  /* Surfaces */
  --page: oklch(13% .015 255);            /* outside the game frame */
  --bg: oklch(19% .02 255);               /* game background */
  --surface: oklch(23% .022 255);         /* dialogs */
  --surface-2: oklch(29% .025 255);       /* buttons, raised */
  --surface-3: oklch(35% .028 255);       /* hover, tracks */
  --tile: oklch(21.5% .022 255 / .92);    /* cards, rows, tiles */
  --tile-hover: oklch(26.5% .025 255 / .95);
  --tile-selected: oklch(27% .04 225 / .96);
  --list: oklch(20% .02 255 / .9);        /* rank list container */
  --field: oklch(20% .02 255);            /* inputs, option rows */
  --glass: oklch(15% .02 255 / .72);      /* top-bar controls */
  --chrome: oklch(10% .01 255 / .62);     /* platform controls over gameplay */
  --scrim: oklch(11% .02 255 / .74);
  --line: oklch(44% .025 255);
  --line-soft: oklch(34% .022 255);

  /* Content */
  --fg: oklch(97% .005 255);
  --muted: oklch(79% .02 255);
  --on-accent: oklch(20% .03 240);
  --accent: oklch(82% .13 200);
  --accent-hover: oklch(89% .1 200);
  /* Room tier colours: Explorer green, Contender blue, Challenger purple, Champion gold */
  --tier-explorer: oklch(72% .17 140);
  --tier-contender: oklch(62% .19 262);
  --tier-challenger: oklch(58% .2 305);
  --tier-champion: oklch(78% .15 85);
  --selected: oklch(30% .05 225);
  --good: oklch(80% .15 155);
  --warn: oklch(83% .14 75);
  --bad: oklch(74% .16 25);

  /* Typography */
  --font-display: Bahnschrift, 'DIN Alternate', 'Barlow Semi Condensed', 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display-weight: 600;
  --display-case: uppercase;              /* headings, buttons, tiles */
  --display-track: .06em;                 /* tracking when uppercase */

  /* Shape */
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-btn: 12px;
  --r-dlg: 22px;
  --border-sel: 2px;                      /* selected tile outline */
  --btn-shadow: none;                     /* e.g. a 3D under-edge */
  --btn-shadow-primary: none;
  --dlg-shadow: 0 30px 90px oklch(5% 0 0 / .6);

  /* Environment artwork slot (see themes.js → assets.environment) */
  --env-glow-low: oklch(33% .05 232);
  --env-glow-high: oklch(27% .03 262);
  --env-line: oklch(78% .04 230 / .13);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: .15s;
  --dur-screen: .26s;
  --dur-overlay: .22s;
  --enter-shift: 18px;                    /* horizontal travel on push/pop */

  /* Icons & targets */
  --icon-stroke: 1.9;
  --tap: 44px;
  /* Avatar frames (decorative, delivered by the back end; colours here are stand-ins) */
  --av-frame-w: 3px;
  --frame-gold: oklch(86% .14 88); --frame-gold-lo: oklch(62% .12 70);
  --frame-silver: oklch(92% .01 250); --frame-silver-lo: oklch(62% .015 250);
}