/* Design tokens (v6.41): the one palette and the type, radius, spacing and
   shadow scales every stylesheet draws from. No other stylesheet writes a
   colour of its own. Rules use a role token (--bg, --surface, --text, --muted,
   --line, --accent, --danger, --ok) where one fits and a family step
   (--accent-700, --stone-850) otherwise. The first block is the Gold theme,
   the default: a theme (styles/themes.css, chosen in Settings) redefines
   exactly those tokens, so the second block's colours (danger, NSFW, meters)
   mean the same in every theme. A colour needed with transparency has an
   -rgb twin: rgb(var(--accent-rgb) / .35). Families run light (100) to dark
   (975). The theme-color meta tags in index.html and bench.html keep a
   literal, since HTML cannot read CSS variables. */
:root,[data-theme=gold]{
  /* Surfaces, darkest first: page, fields, image wells, panels, dialogs, raised rows, warm bars and buttons */
  --bg:#0a0909;--bg-rgb:10 9 9;--field:#090909;--well:#0c0c0d;--well-rgb:12 12 13;--surface-low:#0f0e0e;--surface-low-rgb:15 14 14;
  --surface:#121113;--surface-raised:#1a1919;--surface-warm:#15130f;--surface-warm-rgb:21 19 15;--surface-warm-high:#191612;--surface-warm-high-rgb:25 22 18;
  /* Text: body, soft, warm (the player's lines), lore (records), dim, muted, disabled */
  --text:#eee8dc;--text-soft:#d8d1c5;--text-warm:#d9cba9;--text-lore:#d7c899;
  --text-dim:#b4ada0;--muted:#9a9285;--disabled:#57524a;
  /* Accent: the theme's colour; --accent is the main one, --on-accent is text on it */
  --accent-950:#1f1a10;--accent-900:#2b2413;--accent-900-rgb:43 36 19;--accent-850:#392f13;--accent-800:#4b3b17;--accent-800-rgb:75 59 23;
  --accent-750:#5b4b29;--accent-700:#6e5a2c;--accent-700-rgb:110 90 44;--accent-600:#8e6f29;--accent-550:#9c7c42;
  --accent-450:#c39b55;--accent-450-rgb:195 155 85;--accent-400:#d6ad64;--accent-350:#d9b96d;--accent:#e1bd55;--accent-rgb:225 189 85;
  --accent-300:#e2c47d;--accent-300-rgb:226 196 125;--accent-200:#f0d18a;--accent-100:#ffe58c;--on-accent:#211a08;
  /* Lines: the default border */
  --line:var(--accent-800);
  /* Stone: warm greys and sand for dividers, fields, tracks and quiet fills */
  --stone-900:#2a2620;--stone-850:#302b22;--stone-800:#39342b;--stone-780:#3d3424;--stone-780-rgb:61 52 36;
  --stone-750:#423a2d;--stone-700:#4b4438;--stone-600:#5d513b;--stone-550:#6b6253;
  --stone-500:#756747;--stone-300:#afa697;--stone-200:#cfc6b6;--stone-100:#e3d7bd;
}
:root{
  /* Grey: cool greys for switch tracks, meter wells and item borders */
  --grey-850:#262427;--grey-800:#333137;--grey-750:#3d3a40;--grey-650:#555058;
  --grey-350:#aaa3aa;
  /* Danger */
  --danger-950:#241716;--danger-900:#3a1d15;--danger-850:#3a2a26;--danger-700:#75443f;
  --danger-600:#8a4b3c;--danger-400:#d98b81;--danger-strong:#c0392b;--danger:#d77a6f;
  --danger-300:#e6a69e;--danger-200:#f0b8ae;--danger-100:#f0c9bd;
  /* NSFW crimson: the chat bar and narrator menu while NSFW narration is on */
  --nsfw-975:#181114;--nsfw-950:#201215;--nsfw-900:#2b1418;
  --nsfw-650:#70414a;--nsfw-600:#8e3b4b;--nsfw-500:#b26069;--nsfw-400:#c4757d;
  --nsfw-300:#e7a7ac;--nsfw-200:#ffb4b6;--nsfw-50:#fff0ed;
  /* States and plain black and white; --ok and --saving are the cloud dot's green and yellow in every theme */
  --ok:#8fbd8b;--saving:#e1bd55;--warn:#f0a24a;--white:#ffffff;--black:#000000;--black-rgb:0 0 0;
  /* Condition meters: the fill runs from -from to -to; -icon colours the glyph */
  --health-from:#93000a;--health-to:#e0564f;--health-icon:#ff9c94;
  --health-glow-rgb:255 120 112;--stamina-from:#d6a91e;--stamina-to:#ffe088;
  --stamina-icon:#f2ca50;--stamina-icon-rgb:242 202 80;--hunger-from:#2d4c1e;--hunger-to:#6b8e23;--hunger-to-rgb:107 142 35;
  --hunger-icon:#8fae5a;--thirst-from:#1e40af;--thirst-to:#60a5fa;--thirst-to-rgb:96 165 250;
  --mana-from:#4c1d95;--mana-to:#a78bfa;--mana-to-rgb:167 139 250;--mana-icon:#b39aff;
  /* Type: the story and panels in EB Garamond, labels and controls in Epilogue.
     Icon glyph sizes are dimensions, not type, and stay in pixels. */
  --head:"Epilogue",sans-serif;--body:"EB Garamond",serif;
  --size-micro:10px;--size-tiny:11px;--size-caption:11px;--size-label:12px;--size-ui:13px;
  --size-small:14px;--size-compact:15px;--size-body:16px;--size-lead:17px;--size-story:18px;
  --size-title:22px;--size-headline:24px;--size-display:28px;
  /* Corners */
  --radius-xs:4px;--radius-sm:6px;--radius-md:9px;--radius-lg:12px;--radius-xl:14px;--radius-2xl:18px;--radius-pill:20px;--radius-round:50%;
  /* Spacing: --space-N is 2N px. Gaps use it; padding and margins join the
     scale as each area is restyled. */
  --space-1:2px;--space-2:4px;--space-3:6px;--space-4:8px;--space-5:10px;--space-6:12px;--space-7:14px;--space-8:16px;--space-9:18px;--space-10:20px;
  /* Shadows: menus and popovers, and floating buttons */
  --shadow-pop:0 10px 30px rgb(var(--black-rgb) / .6);--shadow-float:0 6px 18px rgb(var(--black-rgb) / .55);
}