/* Design tokens — The GM's Console (extracted from the original CritNexus design) */
:root{
  /* surfaces — warm, candlelit, never pure black */
  --ink:#14110B;            /* page background */
  --obsidian:#1C170F;       /* deep recessed panel */
  --leather:#241D14;        /* card surface */
  --leather-raised:#2E2519; /* hover / raised surface */
  --parchment:#E7DAB9;      /* parchment inset (stat blocks, scrolls) */
  --parchment-edge:#D4C29A;

  /* metals — the accent language */
  --gold:#C8A24A;           /* primary accent: gold leaf */
  --gold-bright:#E6C871;    /* highlight / hover / glow */
  --bronze:#8A6A3B;         /* secondary metal, borders */

  /* semantic — herbal & arcane, not acid */
  --blood:#A12E26;          --blood-bright:#C8463A;  /* HP / damage / danger */
  --moss:#6E8E57;           --moss-bright:#88A86B;   /* healing / success */
  --arcane:#8A74C9;         /* spells / magic */
  --amber:#C98A2E;          /* warnings / temporary */

  /* ink — text */
  --text:#ECE2C9;           /* primary on dark */
  --text-muted:#A6967A;     /* faded ink */
  --text-faint:#74664E;     /* captions */
  --ink-text:#2A2014;       /* text on parchment */

  /* lines & borders */
  --border:#3A2E1D;
  --border-strong:#4A3B26;
  --border-gold:rgba(200,162,74,.45);

  /* ---- semantic aliases (prefer these in product code) ---- */
  --surface-page:var(--ink);
  --surface-sunken:var(--obsidian);
  --surface-card:var(--leather);
  --surface-raised:var(--leather-raised);
  --surface-page-content:var(--parchment);

  --accent:var(--gold);
  --accent-hover:var(--gold-bright);
  --accent-quiet:var(--bronze);

  --text-body:var(--text);
  --text-secondary:var(--text-muted);
  --text-caption:var(--text-faint);
  --text-on-accent:#22190a;
  --text-on-parchment:var(--ink-text);

  --danger:var(--blood);
  --danger-bright:var(--blood-bright);
  --success:var(--moss);
  --success-bright:var(--moss-bright);
  --magic:var(--arcane);
  --warning:var(--amber);
}

/* ---- Light (Parchment) theme — set data-theme="light" on <html> ---- */
[data-theme="light"]{
  --ink:#E7DAB9; --obsidian:#DECCA4; --leather:#F3EBD5; --leather-raised:#FBF5E4;
  --parchment:#FBF5E4; --parchment-edge:#E2D2AC;
  --gold:#9C7424; --gold-bright:#C8A24A; --bronze:#8A6A3B;
  --blood:#94271F; --blood-bright:#B83A2F; --moss:#566E3F; --moss-bright:#6E8E57;
  --arcane:#6E5AA6; --amber:#A9701F;
  --text:#2A2014; --text-muted:#5C4E36; --text-faint:#897851; --ink-text:#2A2014;
  --border:#C8B68E; --border-strong:#B19C72;
  --border-gold:rgba(156,116,36,.5);
}

/* ============================================================
   TYPOGRAPHY TOKENS — The GM's Console
   Three voices for three jobs. Cinzel for titles/labels (used sparingly),
   EB Garamond for prose, Inter for all UI/controls/data (tabular figures).
   ============================================================ */
:root{
  --font-display:'Cinzel', Georgia, 'Times New Roman', serif;
  --font-serif:'EB Garamond', Garamond, Georgia, serif;
  --font-ui:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* semantic aliases */
  --font-title:var(--font-display);   /* engraved headings, eyebrows, labels */
  --font-prose:var(--font-serif);     /* rulebook body & flavor text */
  --font-data:var(--font-ui);         /* controls, stats, tables */

  /* display / title scale (Cinzel) */
  --fs-display:46px;
  --fs-title:24px;
  --fs-eyebrow:11px;

  /* prose scale (EB Garamond) */
  --fs-prose:17px;
  --fs-prose-sm:14px;

  /* ui scale (Inter) */
  --fs-ui:15px;
  --fs-ui-sm:13px;
  --fs-data:26px;
  --fs-caption:12px;
  --fs-micro:10px;

  /* letter-spacing — Cinzel wants air, eyebrows want a lot */
  --ls-display:.04em;
  --ls-title:.03em;
  --ls-eyebrow:.32em;
  --ls-label:.18em;

  --lh-tight:1.1; /* @kind other */
  --lh-body:1.6;  /* @kind other */
}

/* ============================================================
   SPACING & FORM TOKENS — The GM's Console
   A 4px base step. Corners stay tight (3–8px) so surfaces feel forged
   rather than soft.
   ============================================================ */
:root{
  /* spacing scale — 4px base */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s8:48px; --s10:64px;

  /* radii — tight & forged */
  --r-sm:3px; --r-md:5px; --r-lg:8px;
}

/* ============================================================
   EFFECTS TOKENS — The GM's Console
   Depth comes from warm shadows and a candlelit gold glow. The signature
   "forged panel" uses gilt corner brackets rather than heavy borders.
   ============================================================ */
:root{
  --glow:0 0 26px rgba(230,200,113,.22);     /* candlelight halo (active rows, focus) */
  --shadow:0 10px 30px rgba(0,0,0,.55);      /* lifted popovers, scrolls */
  --shadow-sm:0 4px 14px rgba(0,0,0,.4);     /* resting cards */
}
[data-theme="light"]{
  --glow:0 0 22px rgba(156,116,36,.22);
  --shadow:0 8px 22px rgba(74,59,38,.16);
  --shadow-sm:0 3px 10px rgba(74,59,38,.12);
}

/* ============================================================
   BASE — The GM's Console
   Page defaults. The warm radial wash on the background is part of the
   brand: a faint candle-glow top-right and an arcane bloom bottom-left.
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-serif);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(200,162,74,.05), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(138,116,201,.05), transparent 60%);
}
a{color:var(--gold-bright);text-decoration:none}
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px;border-radius:var(--r-sm)}

/* tabular figures — use anywhere a number must stay aligned */
.tnum{font-variant-numeric:tabular-nums}