/*
  Themes are sets of custom properties. base.css only ever reads these tokens.

  The first block holds every token with the Dungeon values. It matches :root and any element
  with a data-theme attribute, so the theme previews in Settings get a complete set too.
  Each later theme overrides what it changes.

  Pixel fonts are sized in px at multiples of their grid so they stay sharp:
  Press Start 2P and Silkscreen on 8px, VT323 and Pixelify Sans look best at 16px and up.
*/

:root {
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ── Dungeon (default) ─────────────────────────────────────────── */
:root,
[data-theme] {
  --scheme: dark;
  --bg: #14110e;
  --bg-image: radial-gradient(120% 60% at 50% 0%, #2b2118 0%, transparent 70%);
  --bg-size: auto;
  --surface: #1f1a15;
  --surface-2: #2a231c;
  --border: #4a3d2f;
  --text: #efe6d6;
  --text-dim: #ab9c83;
  --accent: #e8a33d;
  --accent-text: #1b1206;
  --focus: #f3bd5c;
  --danger: #f07a63;

  --btn-bg: #2d251d;
  --btn-text: #efe6d6;
  --btn-border: #5a4a38;
  --btn-shadow: 0 3px 0 #0b0907;
  --btn-shadow-pressed: 0 1px 0 #0b0907;
  /* --btn-active-bg / --btn-active-text: optional, only set by themes that invert buttons on press */
  --press-x: 0px;
  --press-y: 2px;

  --d20-bg: #3b2a10;
  --d20-text: #f5c542;
  --d20-border: #a77a26;

  --die-bg: #2a231c;
  --die-text: #efe6d6;
  --die-border: #5a4a38;
  --die-size: 2.75rem;

  --crit-max: #f5c542;
  --crit-min: #f07a63;
  --crit-max-bg: #3d3010;
  --crit-max-fg: #f8d36a;
  --crit-min-bg: #3f1611;
  --crit-min-fg: #ff8a75;

  --overlay: none;
  --glow: none;

  --radius: 10px;
  --radius-sm: 6px;
  --bw: 2px;
  --panel-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 8px 24px rgb(0 0 0 / 0.35);

  --font-display: "Cinzel", var(--serif);
  --font-numbers: "Cinzel", var(--serif);
  --font-body: var(--sans);
  --font-ui: var(--font-body);

  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-ui: 1rem;
  --fs-label: 0.8125rem;
  --fs-title: 1.375rem;
  --fs-card: 1.0625rem;
  --fs-die-btn: 1.375rem;
  --fs-die: 1.25rem;
  --fs-die-sub: 0.75rem;
  --fs-total: 4.5rem;

  /* Weight for totals, dice and headings; Silkscreen's bold digits are hard to read */
  --fw-strong: 700;
  --title-case: none;
  --title-spacing: 0.04em;
  --label-case: uppercase;
  --label-spacing: 0.08em;

  --roll-ms: 380ms;
  --roll-ease: cubic-bezier(0.2, 0.9, 0.3, 1.25);

  /* Die outlines and icons; pixel themes switch to hard, stepped edges */
  --shape-rendering: geometricPrecision;
  --stroke-join: round;
  --icon-stroke: 1.5px;
}

/* ── Parchment (light) ─────────────────────────────────────────── */
[data-theme="parchment"] {
  --scheme: light;
  --bg: #e9dcc0;
  --bg-image:
    radial-gradient(90% 50% at 15% 0%, rgb(255 250 235 / 0.7), transparent 70%),
    radial-gradient(80% 60% at 100% 100%, rgb(140 100 50 / 0.2), transparent 70%);
  --surface: #f4ead3;
  --surface-2: #ebdcbc;
  --border: #9c7e52;
  --text: #2d2116;
  --text-dim: #67502f;
  --accent: #8e2a1d;
  --accent-text: #fbf3e2;
  --focus: #8e2a1d;
  --danger: #a3231a;

  --btn-bg: #f8f0dc;
  --btn-text: #2d2116;
  --btn-border: #9c7e52;
  --btn-shadow: 0 2px 0 #b99b6c;
  --btn-shadow-pressed: 0 0 0 #b99b6c;

  --d20-bg: #8e2a1d;
  --d20-text: #fbf3e2;
  --d20-border: #5e1a12;

  --die-bg: #fbf5e6;
  --die-text: #2d2116;
  --die-border: #9c7e52;

  --crit-max: #7a5200;
  --crit-min: #a3231a;
  --crit-max-bg: #f6e2a6;
  --crit-max-fg: #5f3f00;
  --crit-min-bg: #f3d0c4;
  --crit-min-fg: #8a1a12;

  --radius: 4px;
  --radius-sm: 3px;
  --panel-shadow: 0 1px 2px rgb(80 50 20 / 0.25);

  --font-display: "IM Fell English", var(--serif);
  --font-numbers: "IM Fell English", var(--serif);
  --font-body: "IM Fell English", var(--serif);

  --fs-body: 1.0625rem;
  --fs-ui: 1.0625rem;
  --fs-title: 1.625rem;
  --fs-card: 1.25rem;
  --fs-die-btn: 1.5rem;
  --fs-die: 1.375rem;
  --fs-total: 4.75rem;
  --title-spacing: 0;
  --label-spacing: 0.06em;
  --roll-ease: ease-out;
}

/* ── Arcade (NES palette) ──────────────────────────────────────── */
[data-theme="arcade"] {
  --bg: #000000;
  --bg-image: radial-gradient(rgb(252 252 252 / 0.14) 1px, transparent 1.5px);
  --bg-size: 24px 24px;
  --surface: #0a0a1e;
  --surface-2: #16163c;
  --border: #fcfcfc;
  --text: #fcfcfc;
  --text-dim: #b4b4e4;
  --accent: #3cbcfc;
  --accent-text: #000000;
  --focus: #f8b800;
  --danger: #f85838;

  --btn-bg: #16163c;
  --btn-text: #fcfcfc;
  --btn-border: #fcfcfc;
  --btn-shadow: 4px 4px 0 #0058f8;
  --btn-shadow-pressed: 0 0 0 #0058f8;
  --press-x: 4px;
  --press-y: 4px;

  --d20-bg: #a81000;
  --d20-text: #fcfcfc;
  --d20-border: #fcfcfc;

  --die-bg: #000000;
  --die-text: #fcfcfc;
  --die-border: #fcfcfc;
  --die-size: 48px;

  --crit-max: #f8b800;
  --crit-min: #f85838;
  --crit-max-bg: #f8b800;
  --crit-max-fg: #000000;
  --crit-min-bg: #a81000;
  --crit-min-fg: #fcfcfc;

  --radius: 0;
  --radius-sm: 0;
  --bw: 4px;
  --panel-shadow: 8px 8px 0 #0058f8;

  --font-display: "Press Start 2P", var(--mono);
  --font-numbers: "Press Start 2P", var(--mono);
  --font-body: "VT323", var(--mono);

  --fs-body: 22px;
  --fs-small: 20px;
  --fs-ui: 22px;
  --fs-label: 20px;
  --fs-title: 16px;
  --fs-card: 16px;
  --fs-die-btn: 16px;
  --fs-die: 16px;
  --fs-die-sub: 18px;
  --fs-total: 48px;

  --title-case: uppercase;
  --title-spacing: 0;
  --label-spacing: 0.04em;
  --roll-ms: 320ms;
  --roll-ease: steps(4, end);

  --shape-rendering: crispEdges;
  --stroke-join: miter;
  --icon-stroke: 2px;
}

/* ── Game Boy (four DMG greens) ────────────────────────────────── */
[data-theme="gameboy"] {
  --scheme: light;
  --bg: #8bac0f;
  --bg-image:
    linear-gradient(rgb(15 56 15 / 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgb(15 56 15 / 0.07) 1px, transparent 1px);
  --bg-size: 4px 4px;
  --surface: #9bbc0f;
  --surface-2: #8bac0f;
  --border: #0f380f;
  --text: #0f380f;
  --text-dim: #0f380f;
  --accent: #0f380f;
  --accent-text: #9bbc0f;
  --focus: #306230;
  --danger: #0f380f;

  --btn-bg: #9bbc0f;
  --btn-text: #0f380f;
  --btn-border: #0f380f;
  --btn-shadow: 4px 4px 0 #306230;
  --btn-shadow-pressed: 0 0 0 #306230;
  --press-x: 4px;
  --press-y: 4px;

  --d20-bg: #0f380f;
  --d20-text: #9bbc0f;
  --d20-border: #0f380f;

  --die-bg: #9bbc0f;
  --die-text: #0f380f;
  --die-border: #0f380f;
  --die-size: 48px;

  --crit-max: #0f380f;
  --crit-min: #306230;
  --crit-max-bg: #0f380f;
  --crit-max-fg: #9bbc0f;
  --crit-min-bg: #306230;
  --crit-min-fg: #e0f0a0;

  --radius: 0;
  --radius-sm: 0;
  --bw: 4px;
  --panel-shadow: 6px 6px 0 #306230;

  --font-display: "Silkscreen", var(--mono);
  --font-numbers: "Silkscreen", var(--mono);
  --font-body: "Pixelify Sans", var(--mono);

  --fs-body: 18px;
  --fs-small: 16px;
  --fs-ui: 18px;
  --fs-label: 16px;
  --fs-title: 24px;
  --fs-card: 16px;
  --fs-die-btn: 24px;
  --fs-die: 24px;
  --fs-die-sub: 16px;
  --fs-total: 64px;

  --fw-strong: 400;
  --title-case: uppercase;
  --title-spacing: 0;
  --roll-ms: 320ms;
  --roll-ease: steps(4, end);

  --shape-rendering: crispEdges;
  --stroke-join: miter;
  --icon-stroke: 2px;
}

/* ── Terminal (green phosphor) ─────────────────────────────────── */
[data-theme="terminal"] {
  --bg: #020602;
  --bg-image: radial-gradient(120% 80% at 50% 40%, #0b1c0d 0%, #020602 100%);
  --surface: #051005;
  --surface-2: #0a1a0b;
  --border: #1f8a3c;
  --text: #3cff73;
  --text-dim: #2bbf55;
  --accent: #3cff73;
  --accent-text: #021a08;
  --focus: #c4ffd4;
  --danger: #ff6a5a;

  --btn-bg: #051005;
  --btn-text: #3cff73;
  --btn-border: #1f8a3c;
  --btn-shadow: none;
  --btn-shadow-pressed: none;
  --btn-active-bg: #3cff73;
  --btn-active-text: #021a08;
  --press-y: 0px;

  --d20-bg: #0d2a12;
  --d20-text: #c4ffd4;
  --d20-border: #3cff73;

  --die-bg: #020602;
  --die-text: #3cff73;
  --die-border: #1f8a3c;
  --die-size: 52px;

  --crit-max: #c4ffd4;
  --crit-min: #ff6a5a;
  --crit-max-bg: #3cff73;
  --crit-max-fg: #021a08;
  --crit-min-bg: #ff6a5a;
  --crit-min-fg: #1a0402;

  --overlay: repeating-linear-gradient(to bottom, transparent 0 2px, rgb(0 0 0 / 0.25) 2px 3px);
  --glow: 0 0 6px rgb(60 255 115 / 0.5);

  --radius: 0;
  --radius-sm: 0;
  --bw: 2px;
  --panel-shadow: 0 0 24px rgb(60 255 115 / 0.08);

  --font-display: "VT323", var(--mono);
  --font-numbers: "VT323", var(--mono);
  --font-body: "VT323", var(--mono);

  --fs-body: 22px;
  --fs-small: 20px;
  --fs-ui: 22px;
  --fs-label: 20px;
  --fs-title: 32px;
  --fs-card: 24px;
  --fs-die-btn: 32px;
  --fs-die: 32px;
  --fs-die-sub: 20px;
  --fs-total: 96px;

  --title-case: uppercase;
  --title-spacing: 0.04em;
  --roll-ms: 300ms;
  --roll-ease: steps(3, end);

  --shape-rendering: crispEdges;
  --stroke-join: miter;
  --icon-stroke: 2px;
}

/* ── Amber terminal ────────────────────────────────────────────── */
[data-theme="amber"] {
  --bg: #070400;
  --bg-image: radial-gradient(120% 80% at 50% 40%, #1f1503 0%, #070400 100%);
  --surface: #0f0a02;
  --surface-2: #1a1205;
  --border: #8a5d00;
  --text: #ffb000;
  --text-dim: #d18f00;
  --accent: #ffb000;
  --accent-text: #1a1000;
  --focus: #ffe2a3;
  --danger: #ff6a5a;

  --btn-bg: #0f0a02;
  --btn-text: #ffb000;
  --btn-border: #8a5d00;
  --btn-shadow: none;
  --btn-shadow-pressed: none;
  --btn-active-bg: #ffb000;
  --btn-active-text: #1a1000;
  --press-y: 0px;

  --d20-bg: #2a1d00;
  --d20-text: #ffe2a3;
  --d20-border: #ffb000;

  --die-bg: #070400;
  --die-text: #ffb000;
  --die-border: #8a5d00;
  --die-size: 52px;

  --crit-max: #ffe2a3;
  --crit-min: #ff6a5a;
  --crit-max-bg: #ffb000;
  --crit-max-fg: #1a1000;
  --crit-min-bg: #ff6a5a;
  --crit-min-fg: #1a0402;

  --overlay: repeating-linear-gradient(to bottom, transparent 0 2px, rgb(0 0 0 / 0.25) 2px 3px);
  --glow: 0 0 6px rgb(255 176 0 / 0.45);

  --radius: 0;
  --radius-sm: 0;
  --bw: 2px;
  --panel-shadow: 0 0 24px rgb(255 176 0 / 0.08);

  --font-display: "VT323", var(--mono);
  --font-numbers: "VT323", var(--mono);
  --font-body: "VT323", var(--mono);

  --fs-body: 22px;
  --fs-small: 20px;
  --fs-ui: 22px;
  --fs-label: 20px;
  --fs-title: 32px;
  --fs-card: 24px;
  --fs-die-btn: 32px;
  --fs-die: 32px;
  --fs-die-sub: 20px;
  --fs-total: 96px;

  --title-case: uppercase;
  --title-spacing: 0.04em;
  --roll-ms: 300ms;
  --roll-ease: steps(3, end);

  --shape-rendering: crispEdges;
  --stroke-join: miter;
  --icon-stroke: 2px;
}

/* ── Grimoire (v1's purple and gold) ───────────────────────────── */
[data-theme="grimoire"] {
  --bg: #120c1c;
  --bg-image:
    radial-gradient(70% 50% at 50% 0%, rgb(140 90 220 / 0.25), transparent 70%),
    radial-gradient(40% 30% at 90% 100%, rgb(217 180 74 / 0.1), transparent 70%);
  --surface: #1c1329;
  --surface-2: #261a37;
  --border: #4e3a6e;
  --text: #efe7ff;
  --text-dim: #b4a5d3;
  --accent: #d9b44a;
  --accent-text: #1a1024;
  --focus: #e8c868;
  --danger: #ff8da2;

  --btn-bg: #261a37;
  --btn-text: #efe7ff;
  --btn-border: #5c4682;
  --btn-shadow: 0 3px 0 #0a0612;
  --btn-shadow-pressed: 0 1px 0 #0a0612;

  --d20-bg: #2a1f3b;
  --d20-text: #ffd700;
  --d20-border: #d9b44a;

  --die-bg: #261a37;
  --die-text: #efe7ff;
  --die-border: #5c4682;

  --crit-max: #ffd75e;
  --crit-min: #ff8da2;
  --crit-max-bg: #3d2f12;
  --crit-max-fg: #ffd75e;
  --crit-min-bg: #3d1424;
  --crit-min-fg: #ff9fb1;

  --radius: 14px;
  --radius-sm: 8px;
  --panel-shadow: 0 0 0 1px rgb(217 180 74 / 0.08), 0 10px 30px rgb(0 0 0 / 0.4);

  --font-display: "Uncial Antiqua", var(--serif);
  --font-numbers: "Cinzel", var(--serif);
  --font-body: var(--sans);

  --fs-title: 1.5rem;
  --title-spacing: 0.02em;
}

/* ── High contrast ─────────────────────────────────────────────── */
[data-theme="contrast"] {
  --bg: #000000;
  --bg-image: none;
  --surface: #000000;
  --surface-2: #141414;
  --border: #ffffff;
  --text: #ffffff;
  --text-dim: #e6e6e6;
  --accent: #ffd600;
  --accent-text: #000000;
  --focus: #00e5ff;
  --danger: #ff9e94;

  --btn-bg: #000000;
  --btn-text: #ffffff;
  --btn-border: #ffffff;
  --btn-shadow: none;
  --btn-shadow-pressed: none;
  --btn-active-bg: #ffffff;
  --btn-active-text: #000000;
  --press-y: 0px;

  --d20-bg: #ffd600;
  --d20-text: #000000;
  --d20-border: #ffd600;

  --die-bg: #000000;
  --die-text: #ffffff;
  --die-border: #ffffff;
  --die-size: 3rem;

  --crit-max: #ffd600;
  --crit-min: #ff9e94;
  --crit-max-bg: #ffd600;
  --crit-max-fg: #000000;
  --crit-min-bg: #ff9e94;
  --crit-min-fg: #000000;

  --radius: 6px;
  --radius-sm: 4px;
  --bw: 3px;
  --panel-shadow: none;

  --font-display: var(--sans);
  --font-numbers: var(--sans);
  --font-body: var(--sans);

  --fs-body: 1.125rem;
  --fs-small: 1rem;
  --fs-ui: 1.125rem;
  --fs-label: 1rem;
  --fs-title: 1.5rem;
  --fs-die-btn: 1.5rem;
  --fs-die: 1.5rem;
  --fs-die-sub: 0.875rem;
  --fs-total: 5rem;
  --title-spacing: 0;
  --roll-ms: 1ms;
}

/*
  Font override from Settings: headings and numbers only.
  :root[data-font] is more specific than [data-theme], so it wins over every theme.
*/
:root[data-font="press-start"] {
  --font-display: "Press Start 2P", var(--mono);
  --font-numbers: "Press Start 2P", var(--mono);
  --fs-title: 16px;
  --fs-die-btn: 16px;
  --fs-die: 16px;
  --fs-total: 48px;
}

:root[data-font="vt323"] {
  --font-display: "VT323", var(--mono);
  --font-numbers: "VT323", var(--mono);
  --fs-title: 32px;
  --fs-die-btn: 32px;
  --fs-die: 32px;
  --fs-total: 96px;
}

:root[data-font="silkscreen"] {
  --font-display: "Silkscreen", var(--mono);
  --font-numbers: "Silkscreen", var(--mono);
  --fw-strong: 400;
  --fs-title: 24px;
  --fs-die-btn: 24px;
  --fs-die: 24px;
  --fs-total: 64px;
}

:root[data-font="pixelify"] {
  --font-display: "Pixelify Sans", var(--mono);
  --font-numbers: "Pixelify Sans", var(--mono);
  --fs-title: 24px;
  --fs-die-btn: 24px;
  --fs-die: 24px;
  --fs-total: 64px;
}

:root[data-font="cinzel"] {
  --font-display: "Cinzel", var(--serif);
  --font-numbers: "Cinzel", var(--serif);
  --fs-title: 1.375rem;
  --fs-die-btn: 1.375rem;
  --fs-die: 1.25rem;
  --fs-total: 4.5rem;
}

:root[data-font="fell"] {
  --font-display: "IM Fell English", var(--serif);
  --font-numbers: "IM Fell English", var(--serif);
  --fs-title: 1.625rem;
  --fs-die-btn: 1.5rem;
  --fs-die: 1.375rem;
  --fs-total: 4.75rem;
}

:root[data-font="uncial"] {
  --font-display: "Uncial Antiqua", var(--serif);
  --font-numbers: "Uncial Antiqua", var(--serif);
  --fs-title: 1.5rem;
  --fs-die-btn: 1.375rem;
  --fs-die: 1.25rem;
  --fs-total: 4.5rem;
}

:root[data-font="system"] {
  --font-display: var(--sans);
  --font-numbers: var(--sans);
  --fs-title: 1.375rem;
  --fs-die-btn: 1.375rem;
  --fs-die: 1.25rem;
  --fs-total: 4.5rem;
}

/* "Readable text": a plain font for labels, buttons and history; headings and numbers keep the theme font */
:root[data-readable] {
  --font-body: var(--sans);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-ui: 1rem;
  --fs-label: 0.8125rem;
  --fs-die-sub: 0.75rem;
  --label-spacing: 0.08em;
}