/* Design tokens of the in-game interface (PC): THE ONLY place where the theme's colours, scales and layers are defined. Loaded first (index.html, dev pages), before base.css.
   Theme = "Esprit" (violet steel, hue 248, low saturation; docs/decisions/ui-theme-spirit.md). A new theme or a readability variant redefines these tokens (html[data-theme=...]), never component rules.
   Rules: docs/decisions/ui-bible.md. Functional colours (HP / MP / XP, rarities, coins, warnings) are not part of the theme palette. */
:root {
  /* Surfaces and lines */
  --bg: #0c0b11;
  --surface: #2c2a37;
  --surface-deep: #14131a;
  --edge: #6a6682;
  --edge-hi: #a4a0bf;
  --accent: #d8d5ec;
  --accent-hi: #f0eff8;
  --accent-lo: #666186;
  --ink: #2c2a37;
  --text: #f5f4fa;
  --muted: #b8b5c9;
  /* Functional colours (never themed) */
  --blue: #3b82f6;
  --red: #ef4444;
  --green: #4ade80;
  --hp: #e5484d;
  --mp: #3b82f6;
  --xp: #4bbf3a;
  /* Window palette (windows.css, theme-spirit.css) */
  --gf-frame: #585374;
  --gf-frame-hi: #8e88b3;
  --gf-paper: #f0eff6;
  --gf-paper-dark: #dad9e5;
  --gf-ink: #2c2a37;
  --gf-plate: #b5b2cd;
  --gf-plate-dark: #23222b;
  --gf-green: #5ff27a;
  --gf-title: #ffffff;
  --gf-tile: #cfcce2;
  --gf-tile-edge: #8b86a9;
  /* Effects */
  --outline: -1px -1px 0 #14131a, 1px -1px 0 #14131a, -1px 1px 0 #14131a, 1px 1px 0 #14131a, 0 2px 3px rgba(0, 0, 0, 0.65);
  --bevel: 0 0 0 2px #14131a, inset 0 0 0 1px #a4a0bf, inset 0 0 0 3px #2c2a37, inset 0 0 0 4px rgba(216, 213, 236, 0.45);
  --drop: 0 6px 16px rgba(0, 0, 0, 0.5);
  --focus-ring: 0 0 0 2px #14131a, 0 0 0 4px #cac7e0;
  /* Typography: sizes scale with the player's text size (--ui-text, 1 = 100 %) */
  --font-ui: GfFont, "Trebuchet MS", "Segoe UI", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
  --ui-text: 1;
  --fs-micro: calc(9px * var(--ui-text));
  --fs-caption: calc(10px * var(--ui-text));
  --fs-small: calc(11px * var(--ui-text));
  --fs-body: calc(12px * var(--ui-text));
  --fs-strong: calc(13px * var(--ui-text));
  --fs-lead: calc(14px * var(--ui-text));
  --fs-title: calc(16px * var(--ui-text));
  --fs-head: calc(18px * var(--ui-text));
  --fs-display: calc(22px * var(--ui-text));
  /* Spacing */
  --sp-1: 2px; --sp-2: 4px; --sp-3: 6px; --sp-4: 8px; --sp-5: 12px; --sp-6: 16px; --sp-7: 24px;
  /* Corners (Esprit: squarer, 2 to 4 px) */
  --r-sq: 2px; --r-sm: 3px; --r-md: 4px; --r-lg: 6px; --r-pill: 999px; --r-round: 50%;
  /* Motion */
  --dur-fast: 0.08s; --dur-base: 0.12s; --dur-slow: 0.25s; --ease: ease-out;
  /* Layers (one scale for the whole PC interface; GfWindow keeps its windows between --z-window and --z-window-max) */
  --z-fx: 0; --z-hud: 10; --z-chat: 12; --z-banner: 14; --z-board: 25; --z-panel: 30; --z-widget: 35; --z-window: 40; --z-boot: 50; --z-menu: 60; --z-window-max: 79;
  --z-flow: 90; --z-modal: 100; --z-popup: 200; --z-tooltip: 300; --z-debug: 400;
  font-family: var(--font-ui);
}