/* Gates of Speech interface tokens. Source: docs/UI-SPEC.md section 02.
   The interface is an HTML and CSS overlay above the Phaser canvas; components read only these tokens. */
:root {
  /* Color */
  --sky0: #03050a;                       /* page background, letterbox, text on gold buttons */
  --panel: rgba(12, 17, 27, .95);        /* dialog sheet and full panels */
  --panel-card: rgba(16, 22, 35, .94);   /* cards inside the phone and menus */
  --glass: rgba(3, 5, 10, .80);          /* HUD strips and chips over the world */
  --tile: #101827;                       /* ending tiles and word tiles */
  --line: rgba(170, 190, 220, .18);      /* hairlines, card borders */
  --line-chip: rgba(170, 190, 220, .22); /* hint chip borders */
  --ink: #ece6d6;                        /* main text */
  --muted: #a0a9b2;                      /* secondary text, English glosses, labels */
  --faint: #68737d;                      /* decoration only, never text */
  --gold: #e3c27a;                       /* selection, eyebrows, quest markers, primary button fill */
  --gold-dim: #8f7a4a;                   /* selected row border, sheet top border, bar end diamonds */
  --german: #f3da95;                     /* every German word, always italic */
  --correct: #80c4ea;                    /* correct answer marks and borders */
  --nerve: #e08a7a;
  --stamina: #8ad39c;
  --battery: #80c4ea;                    /* battery bar, hint costs */
  --hunger: #e8b26b;

  /* Type: load Cormorant SC (500, 600, 700), Alegreya Sans (400, 500, 700, italic 400, 500), IBM Plex Mono (400) */
  --font-display: "Cormorant SC", Georgia, serif;
  --font-body: "Alegreya Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Shape */
  --radius-panel: 16px;   /* panels and sheets (sheet: top corners only) */
  --radius-card: 14px;
  --radius-hud: 12px;
  --radius-row: 10px;     /* rows and tiles */
  --radius-pill: 999px;   /* chips and primary buttons */
  --diamond: 7px;         /* house marker, rotated 45 degrees */
  --touch-min: 48px;
  --tile-ending: 56px;

  /* Effects: the only soft effects allowed */
  --sheet-shadow: 0 -18px 50px rgba(0, 0, 0, .6);
  --world-text-shadow: 0 1px 0 #000, 0 0 14px rgba(0, 0, 0, .9);

  /* Motion */
  --ease-sheet: cubic-bezier(.2, .8, .2, 1);
  --t-sheet: 300ms;
  --t-fade-in: 250ms;
  --t-hold: 2500ms;
  --t-fade-out: 400ms;
  --t-bar: 200ms;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-sheet: 0ms; --t-fade-in: 0ms; --t-fade-out: 0ms; --t-bar: 0ms; }
}