*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Palette ── */
  --bg:          #0d0b12;
  --surface:     #1c1723;
  --surface-2:   #24202e;
  --surface-3:   #2c2738;
  --border:      #3d3550;
  --border-soft: #322c40;
  --gold:        #c8a45e;
  --gold-dim:    #8f7340;
  --gold-soft:   rgba(200, 164, 94, 0.12);
  --on-gold:     #1a1408; /* text painted directly on a gold-filled surface */
  /* Selection/highlight color for content drawn on the map (token rings, drag-hover,
     rotate handle, active-turn pulse) — kept separate from --gold because --gold is
     tuned per-theme for text/border readability on a *panel* background, while this
     needs to stay a bright, high-contrast accent against arbitrary *map* content (art,
     tokens) regardless of theme. Equal to --gold in every dark theme (nothing changes
     here); only light themes give it its own value — see themes.css. */
  --map-accent:  var(--gold);
  --text:        #e7e7f2;
  --text-muted:  #8585ad;
  --danger:      #c04848;
  --danger-dim:  #8a2f2f;
  --success:     #4a9e68;

  /* ── Typography ── */
  --font-display: 'Cinzel', 'Georgia', serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --text-2xs:  0.6875rem;  /* 11px — smallest allowed */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.875rem;   /* 14px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */

  /* ── Spacing scale (4px base) ── */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */

  /* ── Radii ── */
  --radius-sm:   4px;
  --radius:      6px;
  --radius-lg:   10px;
  --radius-pill: 999px;

  /* ── Elevation ── */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.35);
  --shadow-2: 0 6px 20px rgba(0,0,0,0.45);
  --shadow-3: 0 16px 48px rgba(0,0,0,0.6);

  /* ── Floating-UI z-index scale ──
     Named tiers for popups/overlays so the next one added picks a tier
     instead of another one-off number. Values are unchanged from before this
     was named — this only documents the existing stacking order. Dropdown
     and window share a tier because closeAllWindows() never shows both at
     once. Doesn't cover layout chrome (panel headers/toolbar) or the map's
     internal token/effect layering — those are local stacking concerns, not
     part of this floating-overlay system. */
  --z-dropdown:     100;  /* flyouts, badge/avatar dropdowns */
  --z-window:       100;  /* .window popups (chest, sheet, settings, help, etc.) */
  --z-wizard:       200;  /* character-creation wizard overlay */
  --z-reveal:       300;  /* DM "reveal image" fullscreen overlay */
  --z-intro:        1500; /* session intro ("story so far") overlay */
  --z-topmost:      9999; /* toast + session-ended modal — always on top */
  --z-color-picker: 10001; /* color-picker popover — must clear the mobile map popups'
                               own +1-over-topmost bump (layout.css), since the picker
                               can be opened from a swatch inside one of them */

  /* Floating map-overlay chrome (toolbar buttons, paint/reveal/custom-effect popups).
     Not a --glass-bg color var: a derived color-mix() referencing --surface must be
     written at the point of use, not stored in a shared custom property — a custom
     property's value is fixed by --surface's value where IT is declared (:root), so
     it would never pick up a body.<theme> override of --surface downstream. */
  --glass-blur: blur(8px);

  /* ── Layout ── */
  --panel-w:    280px;
  --transition:       0.15s ease;
  --transition-panel: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

html, body {
  height: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Consistent keyboard focus ring */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

h1, h2 { font-family: var(--font-display); }
h1 { font-size: var(--text-2xl); font-weight: 700; letter-spacing: 0.02em; }
h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.04em; }
h3 {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-4) 0;
}

.hidden { display: none !important; }
.text-muted { color: var(--text-muted); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

/* ── Layout helpers (replace one-off inline flex styles) ── */
.stack { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-1); }
.row { display: flex; align-items: center; gap: var(--space-2); }
.row-sm { display: flex; align-items: center; gap: var(--space-1); }
.row > .grow { flex: 1; min-width: 0; }

/* Minor section sub-heading (e.g. "On Map") */
.subhead {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}