/* Grimório UI — generated from tokens.json */
:root {
  --surface-0: #070a10;
  --surface-100: #0f141d;
  --surface-200: #161d2a;
  --line: #4b3f26;
  --line-faint: #2a2419;
  --line-strong: #a88a5c;
  --ink: #f0e7d3;
  --ink-muted: #a99f8a;
  --gold: #d2b06a;
  --gold-bright: #f0d48a;
  --on-gold: #1b1508;
  --focus: #f0d48a;
  --vida: #d9483f;
  --fome: #9fd4a3;
  --sede: #4aa3e0;
  --energia: #f2cf4a;
  --danger: #ef6a5a;
  --success: #6cc08d;
  --grifinoria: #c63a36;
  --sonserina: #2e8b57;
  --corvinal: #3d6fc4;
  --lufa-lufa: #e5b53b;
  --raridade-comum: #a99f8a;
  --raridade-incomum: #6cc08d;
  --raridade-raro: #5b93e0;
  --raridade-epico: #a87ddc;
  --raridade-lendario: #f0a54a;
  --shadow-panel: 0 18px 40px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.4);
  --glow: 0 0 0 1px rgba(240, 212, 138, 0.35), 0 0 18px rgba(210, 176, 106, 0.45);
  --gold-wash: rgba(210, 176, 106, 0.18);
  --gold-glow: rgba(210, 176, 106, 0.45);
  color-scheme: dark;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-s: 2px;
  --radius-m: 4px;
  --radius-pill: 999px;
  --chanfro: 9px;
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-body: "Alegreya", Georgia, "Times New Roman", serif;
  --font-label: "Alegreya Sans SC", "Alegreya Sans", system-ui, sans-serif;
  --font-ui: "Alegreya Sans", system-ui, sans-serif;
}
.titulo-xl { font-family: var(--font-display); font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: 0.04em; }
.titulo-l { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: 0.04em; }
.titulo-m { font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: 0.06em; }
.corpo { font-family: var(--font-body); font-size: 16px; line-height: 24px; font-weight: 400; }
.corpo-s { font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 400; }
.citacao { font-family: var(--font-body); font-size: 18px; line-height: 28px; font-weight: 400; font-style: italic; }
.rotulo { font-family: var(--font-label); font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; }
.numero { font-family: var(--font-ui); font-size: 13px; line-height: 16px; font-weight: 500; }