/* Design tokens, derived from the legacy pages (style.css, top-nav.css, live-dock.js).
   Identity kept: Ghibli display face, parchment panels, ink brown, brass/gold. */
@font-face {
  font-family: "Ghibli";
  src: url("/fonts/ghibli.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Ink and paper */
  --ink: #3d2817;
  --ink-soft: #5a442a;
  --ink-muted: #6e5233;           /* 6.8:1 on --parchment, 5.3:1 on --sand */
  --parchment: #fff8eb;           /* legacy rgba(255,248,235) */
  --parchment-2: #f6ecda;
  --paper: #fffcf5;
  --sand: #ebdcc3;                /* button face, legacy rgba(235,220,195) */
  --sand-2: #dcc8aa;
  --line: rgba(160, 130, 80, 0.45);
  --line-strong: rgba(140, 110, 60, 0.85);

  /* Brass / gold: decoration and focus, never body text on parchment */
  --brass: #c9a961;
  --gold: #f5d98a;
  --brass-deep: #8b6a2b;          /* 4.7:1 on --parchment only (3.7 on --sand) */

  /* Night surfaces (player overlays, combat) */
  --night: #140b03;
  --night-2: #2c1c0a;
  --on-night: #f5ead0;

  /* Status */
  --ok: #1e6a2e;
  --ok-bg: #e3f1e0;
  --warn: #8a5a00;
  --warn-bg: #fbefd2;
  --danger: #a03024;
  --danger-bg: #f8e1dc;
  --info: #1a4f86;
  --info-bg: #e0ebf6;

  /* Rarity text colors: >= 4.8:1 on --parchment; not for text on --sand */
  --rarity-common: #5a5045;
  --rarity-uncommon: #2f7a1f;
  --rarity-rare: #1f5fae;
  --rarity-very-rare: #7a2fb0;
  --rarity-legendary: #a65a00;
  /* Rarity on dark/photo backgrounds (player view, legacy values) */
  --rarity-common-glow: #ffffff;
  --rarity-uncommon-glow: #1eff00;
  --rarity-rare-glow: #4aa3ff;
  --rarity-very-rare-glow: #c27cff;

  /* Type */
  --font-display: "Ghibli", Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --text-xs: 0.8125rem;   /* 13px, smallest allowed (legacy had 8-9px badges) */
  --text-s: 0.875rem;
  --text-m: 1rem;
  --text-l: 1.25rem;
  --text-xl: 1.625rem;
  --text-2xl: 2.125rem;

  /* Space, radius, elevation */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --radius-pill: 999px;
  --shadow-1: 0 2px 8px rgba(139, 117, 83, 0.18);
  --shadow-2: 0 8px 24px rgba(60, 40, 15, 0.28);
  --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.5);
  --focus: 0 0 0 3px var(--paper), 0 0 0 6px var(--brass-deep);

  --header-h: 56px;
  --z-header: 1000;
  --z-dock: 1100;
  --z-dialog: 1200;
  --z-toast: 1300;
}