/* ==========================================================================
   BASE: the colour tokens (:root) and element defaults (html, body).
   Everything else that used to live here is split by responsibility
   (docs/architecture/PARALLEL_DEVELOPMENT_SPLIT.md), loaded in this order
   from index.html so the cascade is unchanged:
     tokens.css -> app.css -> components.css -> shell.css -> screens/*.css
   Spacing, radius, surfaces, tier and type tokens are in tokens.css.
   ========================================================================== */
  :root{
    --gold:#d4af37;
    --gold-bright:#f5d576;
    --gold-dim:#8a6d1f;          /* borders and rules only -- 3.6:1, too low for text */
    --gold-soft:#bd9a3a;         /* the text weight of gold-dim: 6.6:1 on bg2 */
    --bg0:#0b0a08;
    --bg1:#141210;
    --bg2:#1c1814;
    --line:#332b1e;
    --text:#f1e9d8;
    --text-soft:#d6cbb2;         /* secondary body copy: 11:1 on bg2 */
    --text-dim:#bcb096;          /* labels and meta: 8.2:1 on bg2, was 6.5:1 */
    --green:#5a9c5a;
    --red:#b5453f;
    --draw:#a39a86;              /* a draw: neutral warm grey, between the win green and the loss red, and neither */
  }
  *{box-sizing:border-box;}
  html{
    background: var(--bg0);
    height: 100%;
    overflow-x: hidden; /* defensive: guarantees no horizontal scroll regardless of any single element's sizing */
  }
  body{
    margin:0;
    font-family:'Georgia', 'Iowan Old Style', serif;
    background:
      radial-gradient(ellipse at top, #23200f 0%, var(--bg0) 55%),
      var(--bg0);
    color:var(--text);
    padding:0 0 40px;
    min-height:100vh;
    min-height:100dvh;
    overflow-x: hidden;
    max-width: 100vw;
  }

body { padding-bottom: calc(var(--shell-nav-height) + var(--shell-safe-bottom)); }