/* === Design tokens — every colour the app uses, per display mode ===

   A mode (theme) is ONE block of these variables: copy the [data-mode="light"] block, rename it, change
   the values, and add the mode's name to MODE_CYCLE in js/core/theme.js. Components read only tokens,
   so nothing else needs to change. Optional "flavour" (shapes, textures, icons) goes in themes.css.
   Guide and checklist: docs/THEMES.md.

   Accent colours (--accent-1…5) come from the colour picker (js/core/theme.js) and work in every mode.
   --accent-text is the accent as used for TEXT — it must stay readable on --page-bg / --surface-*. */

:root, [data-mode="dark"] {
    color-scheme: dark;

    /* Type — display = headings, tabs, labels (markup's `font-[Cinzel]` follows it); mono = HUD numbers/labels */
    --font-display: 'Cinzel', serif;
    --font-mono: inherit;

    /* Page */
    --page-bg: #1a1714;
    --page-text: #e8e0d4;
    --vignette: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.4) 100%);

    /* Surfaces (back → front) */
    --surface-sunk: #18181b;                 /* deepest wells */
    --surface-input: #1a1714;                /* selects, trait boxes, editor canvas */
    --surface-raised: #1e1b16;               /* panels, menus, popups */
    --surface-chip: #2a2418;                 /* chips, tab buttons, table headers */
    --surface-selected: #2a2418;             /* selected card / active filter */
    --surface-field: #1f2937;                /* small stat fields (attack bonus) */
    --surface-card: linear-gradient(145deg, #221f1a, #1e1b16);
    --surface-sheet-card: linear-gradient(145deg, #1a1714, #1e1b16);
    --surface-modal: linear-gradient(145deg, #252118, #1e1b16);
    --surface-hero: linear-gradient(135deg, #2a2418 0%, #1e1b16 40%, #221f1a 100%);
    --surface-panel: #1e1b16;                /* fear pool, chronicle chapters */
    --btn-bg: transparent;                   /* outline / pill / nav buttons */
    --picker-bg: transparent;
    --menu-hover: rgba(255,255,255,0.05);
    --shade-20: rgba(0,0,0,0.2);             /* translucent wells over a surface */
    --shade-30: rgba(0,0,0,0.3);
    --shade-40: rgba(0,0,0,0.4);
    --shade-60: rgba(0,0,0,0.6);
    --overlay: rgba(0,0,0,0.85);             /* behind modals */

    /* Lines */
    --border: #3d362a;
    --border-strong: #4a3f30;                /* inputs, buttons, menus */
    --border-soft: #363026;
    --border-neutral: #3f3f46;               /* gear slots, wells */
    --border-faint: #27272a;
    --border-field: #374151;
    --border-chip: #2a2418;
    --border-hover: #5a4d3a;
    --border-danger: #4a2a2a;
    --border-danger-soft: #3d2a2a;
    --border-info: #2a3d5a;
    --frame-line: rgba(212,160,23,0.15);     /* inner frame on hero headers */

    /* Text (strong → faint) */
    --text: #f5efe6;                         /* headings, values, inputs */
    --text-2: #e8e0d4;                       /* body text */
    --text-soft: #d4d4d8;
    --text-muted: #a1a1aa;
    --text-label: #a89880;                   /* field labels, secondary buttons */
    --text-dim: #938c80;
    --text-faint: #87817a;
    --text-ghost: #3f3f46;
    --text-subtle: #a08f78;                  /* inactive tabs, filter pills, info buttons */
    --text-hover: #c8b8a0;
    --text-btn: #9ca3af;                     /* outline / nav buttons */
    --text-icon: #858b96;
    --text-link: #9ca3af;
    --text-close: #8a7b66;
    --text-remove: #6b7280;
    --placeholder: #77716a;
    --placeholder-strong: #77716a;
    --placeholder-faint: #3f3f46;
    --accent-text: var(--accent-1);
    --danger-text: #f87171;
    --danger-strong: #ef4444;
    --domain-ink: 100%;                      /* how much of a domain's colour text keeps (light mixes it toward black) */
    --hue-ink: 100%;                         /* same, for category / feature-kind colours */
    --cat-tint: 14%;                         /* how strongly a compendium category tints its card */

    /* Tinted backgrounds (stat boxes, vitals, domain cards) and their borders */
    --tint-indigo: #14141c;   --tint-indigo-line: rgba(99,102,241,0.4);
    --tint-emerald: #14141c;  --tint-emerald-line: rgba(16,185,129,0.4);
    --tint-red: #1c1414;      --tint-red-line: rgba(74,32,32,0.4);
    --tint-violet: #19141c;   --tint-violet-line: rgba(61,32,80,0.4);
    --tint-amber: #1c1a14;    --tint-amber-line: rgba(74,63,16,0.4);
    --tint-blue: #14181c;     --tint-blue-line: rgba(26,48,80,0.4);
    --tint-danger: #2a1a1a;
    --tint-info: #1a2a3b;
    --stat-box-bg: rgba(0,0,0,0.2);

    /* Tracker dots (empty state) */
    --dot-border: #4a3f30;
    --dot-bg: radial-gradient(circle at 35% 35%, #3d362a 0%, #1a1714 100%);
    --dot-shadow: none;
    --dot-hover-border: #8b7355;

    /* Badges */
    --badge-bg: rgba(0,0,0,0.3);
    --badge-line: rgba(255,255,255,0.06);

    /* Shadows */
    --shadow-card: 0 2px 8px #0005, 0 1px 2px rgba(0,0,0,0.2);
    --shadow-card-hover: 0 4px 16px #0008, 0 2px 4px rgba(0,0,0,0.3);
    --shadow-hero: inset 0 0 30px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.4);
    --shadow-menu: 0 8px 24px rgba(0,0,0,0.4);
    --shadow-modal: 0 20px 60px rgba(0,0,0,0.6);
}

/* Dark — "Obsidian & Ember": the forge at night. Obsidian-glass surfaces, molten accent, a forge glow
   rising from the floor. Overrides the base values above for Dark only (other modes keep falling back to the
   base). Flavour (glass highlights, molten buttons, embers): css/themes.css */
[data-mode="dark"] {
    --page-bg: #0e0c0b;
    --accent-text: color-mix(in srgb, var(--accent-1) 72%, #fff);   /* lifted so dark accents (navy, purple) stay readable */
    --vignette: radial-gradient(ellipse 90% 55% at 50% 108%, color-mix(in srgb, var(--accent-1) 16%, transparent), transparent 70%),
                radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.55) 100%);

    --surface-sunk: #0b0a09;
    --surface-input: #110f0e;
    --surface-raised: #1a1715;
    --surface-chip: #24201c;
    --surface-selected: #2c251d;
    --surface-card: linear-gradient(180deg, #1c1917 0%, #151311 100%);
    --surface-sheet-card: linear-gradient(180deg, #181614 0%, #121010 100%);
    --surface-modal: linear-gradient(180deg, #1e1b18 0%, #141210 100%);
    --surface-hero: radial-gradient(ellipse 80% 140% at 0% 0%, color-mix(in srgb, var(--accent-1) 9%, transparent), transparent 60%), linear-gradient(180deg, #1e1a17 0%, #141210 100%);
    --surface-panel: linear-gradient(180deg, #1a1715 0%, #131110 100%);
    --menu-hover: rgba(255,236,210,0.05);
    --overlay: rgba(6,5,4,0.86);

    --border: #2e2822;
    --border-strong: #3a322a;
    --border-soft: #29241f;
    --border-neutral: #34302c;
    --border-faint: #221e1b;
    --border-chip: #2e2822;
    --border-hover: color-mix(in srgb, var(--accent-1) 45%, #3a322a);
    --frame-line: color-mix(in srgb, var(--accent-1) 22%, transparent);

    --text-label: #ab9c86;
    --text-muted: #a8a29e;
    --text-dim: #9a9288;
    --text-faint: #8c857c;
    --text-subtle: #a8957a;
    --text-btn: #a8a29e;
    --text-icon: #8f8a84;
    --text-close: #94856f;
    --text-remove: #857f78;
    --placeholder: #7d766e;
    --placeholder-strong: #7d766e;

    --stat-box-bg: rgba(0,0,0,0.25);
    --dot-border: #3a322a;
    --dot-bg: radial-gradient(circle at 35% 30%, #2a2520 0%, #0e0c0b 85%);
    --dot-shadow: inset 0 2px 3px rgba(0,0,0,0.6), 0 1px 0 rgba(255,236,210,0.04);
    --dot-hover-border: color-mix(in srgb, var(--accent-1) 60%, #3a322a);

    --badge-bg: rgba(0,0,0,0.35);
    --badge-line: rgba(255,236,210,0.07);

    --shadow-card: inset 0 1px 0 rgba(255,236,210,0.05), 0 1px 2px rgba(0,0,0,0.5), 0 10px 28px -14px rgba(0,0,0,0.9);
    --shadow-card-hover: inset 0 1px 0 rgba(255,236,210,0.07), 0 0 0 1px color-mix(in srgb, var(--accent-1) 22%, transparent), 0 14px 34px -14px color-mix(in srgb, var(--accent-1) 40%, transparent);
    --shadow-hero: inset 0 1px 0 rgba(255,236,210,0.06), 0 12px 32px -16px rgba(0,0,0,0.9);
    --shadow-menu: inset 0 1px 0 rgba(255,236,210,0.05), 0 16px 40px -8px rgba(0,0,0,0.8);
    --shadow-modal: inset 0 1px 0 rgba(255,236,210,0.06), 0 0 60px -20px color-mix(in srgb, var(--accent-1) 35%, transparent), 0 30px 70px -10px rgba(0,0,0,0.85);
}

/* Light — "Printed Rulebook": a well-printed TTRPG book in daylight. Ivory paper, ink-navy text, sepia labels,
   hairline rules; cards are printed cards resting on the page (crisp, layered paper shadows). The accent is
   foil on what you act on. Flavour (book rules, foil, ink-stamped trackers): css/themes.css */
[data-mode="light"] {
    color-scheme: light;
    --page-bg: #f4eee2;
    --page-text: #1d2230;
    --vignette: radial-gradient(ellipse 120% 70% at 50% -10%, rgba(255,253,246,0.9), transparent 60%),
                radial-gradient(ellipse at center, transparent 55%, rgba(90,62,24,0.10) 100%);

    --surface-sunk: #ece5d6;
    --surface-input: #fffdf8;
    --surface-raised: #fffdf8;
    --surface-chip: #efe8da;
    --surface-selected: #f8efd9;
    --surface-field: #eceaf3;
    --surface-card: linear-gradient(180deg, #fffefb 0%, #fbf7ee 100%);
    --surface-sheet-card: linear-gradient(180deg, #fffefb 0%, #faf5ea 100%);
    --surface-modal: linear-gradient(180deg, #fffefb 0%, #f9f4e9 100%);
    --surface-hero: radial-gradient(ellipse 70% 120% at 0% 0%, color-mix(in srgb, var(--accent-1) 7%, transparent), transparent 60%), linear-gradient(180deg, #fffefb 0%, #f8f2e6 100%);
    --surface-panel: linear-gradient(180deg, #fffefb 0%, #faf5ea 100%);
    --btn-bg: #fffdf8;
    --picker-bg: #fffdf8;
    --menu-hover: #f3ecdd;
    --shade-20: rgba(70,50,20,0.035);
    --shade-30: rgba(70,50,20,0.045);
    --shade-40: rgba(70,50,20,0.06);
    --shade-60: rgba(70,50,20,0.05);
    --overlay: rgba(42,32,18,0.45);

    --border: #dcd2bf;
    --border-strong: #cbbea6;
    --border-soft: #e4dbca;
    --border-neutral: #d8cfbf;
    --border-faint: #e8e0d1;
    --border-field: #cbc4da;
    --border-chip: #ddd3c1;
    --border-hover: color-mix(in srgb, var(--accent-1) 45%, #b9a98d);
    --border-danger: #e6c3bd;
    --border-danger-soft: #eed3ce;
    --border-info: #b9cbe0;
    --frame-line: color-mix(in srgb, var(--accent-1) 30%, transparent);

    --text: #1d2230;
    --text-2: #2b3040;
    --text-soft: #383d4c;
    --text-muted: #4b4f5c;
    --text-label: #6a5838;
    --text-dim: #53504a;
    --text-faint: #5f5a51;
    --text-ghost: #8f8574;
    --text-subtle: #66563d;
    --text-hover: #2b3040;
    --text-btn: #5a4b33;
    --text-icon: #625a4d;
    --text-link: #3f4d6b;
    --text-close: #6a5d49;
    --text-remove: #6f675b;
    --placeholder: #8e8270;
    --placeholder-strong: #857966;
    --placeholder-faint: #a99d89;
    --danger-text: #a8322a;
    --danger-strong: #b8352b;

    /* Deep tones for coloured text (pastels are made for dark backgrounds) */
    --tone-red: #922b21;  --tone-red-strong: #b0362a;
    --tone-purple: #6c3483;
    --tone-amber: #87620a; --tone-amber-soft: #6f5108;
    --tone-blue: #1a5276;
    --tone-indigo: #3c3fb3;
    --tone-emerald: #04704f;
    --tone-yellow: #7f5a00;
    --tone-green: #15703a;

    --tint-indigo: #eef0f9;   --tint-indigo-line: rgba(70,74,190,0.22);
    --tint-emerald: #ecf6ef;  --tint-emerald-line: rgba(4,112,79,0.22);
    --tint-red: #fbf0ec;      --tint-red-line: rgba(160,50,40,0.20);
    --tint-violet: #f5eff9;   --tint-violet-line: rgba(108,52,131,0.20);
    --tint-amber: #fbf5e4;    --tint-amber-line: rgba(160,120,20,0.24);
    --tint-blue: #eef4f9;     --tint-blue-line: rgba(26,82,118,0.20);
    --tint-danger: #fbefeb;
    --tint-info: #eaf1f9;
    --stat-box-bg: rgba(70,50,20,0.035);

    /* Trackers: inked rings on the paper (filled = ink stamp, css/themes.css) */
    --dot-border: #a99a80;
    --dot-bg: #fffdf8;
    --dot-shadow: inset 0 1px 2px rgba(70,50,20,0.12);
    --dot-hover-border: color-mix(in srgb, var(--accent-1) 60%, #7a6a50);

    --badge-bg: rgba(70,50,20,0.05);
    --badge-line: rgba(70,50,20,0.10);

    /* Paper shadows: a contact line + a soft lift */
    --shadow-card: 0 1px 0 rgba(255,255,255,0.9) inset, 0 1px 2px rgba(70,50,20,0.10), 0 8px 18px -12px rgba(70,50,20,0.28);
    --shadow-card-hover: 0 1px 0 rgba(255,255,255,0.9) inset, 0 2px 3px rgba(70,50,20,0.10), 0 16px 28px -14px rgba(70,50,20,0.38);
    --shadow-hero: 0 1px 0 rgba(255,255,255,0.9) inset, 0 1px 2px rgba(70,50,20,0.10), 0 10px 24px -14px rgba(70,50,20,0.30);
    --shadow-menu: 0 1px 2px rgba(70,50,20,0.12), 0 14px 32px -10px rgba(70,50,20,0.35);
    --shadow-modal: 0 2px 4px rgba(70,50,20,0.12), 0 30px 70px -20px rgba(42,32,18,0.55);
    --accent-text: color-mix(in srgb, var(--accent-1) 52%, #000);
    --domain-ink: 62%;
    --hue-ink: 50%;
    --cat-tint: 6%;
}

[data-mode="scifi"] {
    /* Cyberpunk HUD: near-black night, cyan lines, neon accent + magenta. Shapes/glow: css/themes.css */
    --font-display: 'Rajdhani', 'Inter', sans-serif;
    --font-mono: 'Share Tech Mono', ui-monospace, monospace;

    --page-bg: #05060c;
    --page-text: #d6ecf5;
    --vignette: radial-gradient(ellipse 70% 50% at 10% 0%, rgba(255,42,157,0.10), transparent 70%),
                radial-gradient(ellipse 60% 50% at 95% 100%, rgba(0,229,255,0.08), transparent 70%),
                radial-gradient(ellipse at center, transparent 55%, rgba(0,0,10,0.6) 100%);

    --surface-sunk: #070912;
    --surface-input: #070912;
    --surface-raised: #0a0d19;
    --surface-chip: #0d1222;
    --surface-selected: #111a33;
    --surface-field: #070912;
    --surface-card: linear-gradient(160deg, #0b1020 0%, #080b16 100%);
    --surface-sheet-card: linear-gradient(160deg, #0a0e1c 0%, #070912 100%);
    --surface-modal: linear-gradient(160deg, #0c1122 0%, #070912 100%);
    --surface-hero: linear-gradient(115deg, #0b1122 0%, #080b16 55%, #150a22 100%);
    --surface-panel: linear-gradient(160deg, #0b1020 0%, #080b16 100%);
    --picker-bg: #0a0d19;
    --menu-hover: #111a33;
    --shade-20: rgba(0,8,20,0.25);
    --shade-30: rgba(0,8,20,0.35);
    --shade-40: rgba(0,8,20,0.45);
    --shade-60: rgba(0,8,20,0.65);
    --overlay: rgba(2,3,10,0.9);

    --border: #16324a;
    --border-strong: #1d4766;
    --border-soft: #132a3e;
    --border-neutral: #16324a;
    --border-faint: #10233a;
    --border-field: #1d4766;
    --border-chip: #16324a;
    --border-hover: #1fa3c7;
    --border-danger: #5a1838;
    --border-danger-soft: #3e1430;
    --border-info: #164a66;
    --frame-line: rgba(0,229,255,0.18);

    --text: #e4f6fc;
    --text-2: #bcd9e8;
    --text-soft: #a3cbe0;
    --text-muted: #8eb3c9;
    --text-label: #7fb4d0;
    --text-dim: #7aa2b9;
    --text-faint: #6c90a6;
    --text-ghost: #36556b;
    --text-subtle: #7fb4d0;
    --text-hover: #b5f3ff;
    --text-btn: #8ec4dc;
    --text-icon: #6f9bb4;
    --text-link: #7fd8f0;
    --text-close: #6f9bb4;
    --text-remove: #6c90a6;
    --placeholder: #56788e;
    --placeholder-strong: #56788e;
    --placeholder-faint: #36556b;
    --accent-text: color-mix(in srgb, var(--accent-1) 60%, #fff);   /* neon: lifted so every accent reads on black */
    --danger-text: #ff5c8a;
    --danger-strong: #ff3d74;

    --tint-indigo: #080a1c;   --tint-indigo-line: rgba(120,110,255,0.35);
    --tint-emerald: #06120f;  --tint-emerald-line: rgba(0,230,160,0.32);
    --tint-red: #14060d;      --tint-red-line: rgba(255,46,99,0.32);
    --tint-violet: #0f0718;   --tint-violet-line: rgba(180,75,255,0.32);
    --tint-amber: #120f05;    --tint-amber-line: rgba(255,211,0,0.28);
    --tint-blue: #051019;     --tint-blue-line: rgba(0,229,255,0.30);
    --tint-danger: #18061a;
    --tint-info: #06121f;
    --stat-box-bg: rgba(0,229,255,0.03);

    --dot-border: #1d4766;
    --dot-bg: #070a14;
    --dot-hover-border: #1fa3c7;

    --badge-bg: rgba(0,229,255,0.05);
    --badge-line: rgba(0,229,255,0.16);

    --shadow-card: 0 0 0 1px rgba(0,229,255,0.03), 0 8px 24px -12px rgba(0,0,0,0.8);
    --shadow-card-hover: 0 0 18px -6px color-mix(in srgb, var(--accent-1) 45%, transparent), 0 8px 24px -12px rgba(0,0,0,0.8);
    --shadow-hero: inset 0 0 40px rgba(0,229,255,0.04), 0 0 24px -12px rgba(255,42,157,0.35);
    --shadow-menu: 0 0 0 1px rgba(0,229,255,0.12), 0 12px 32px rgba(0,0,0,0.6);
    --shadow-modal: 0 0 0 1px rgba(0,229,255,0.10), 0 0 40px -10px color-mix(in srgb, var(--accent-1) 35%, transparent), 0 24px 60px rgba(0,0,0,0.7);
    --cat-tint: 6%;
}

/* Fantasy — "Grimoire by Candlelight": an old spellbook read by a candle. Leather-bound panels with stitched
   edges and brass corners, gilt on what you act on, illuminated first letters, a warm flickering glow.
   Flavour: css/themes.css */
[data-mode="fantasy"] {
    --page-bg: #120c07;
    --page-text: #eadcc2;
    --vignette: radial-gradient(ellipse 80% 60% at 50% 105%, rgba(255,150,60,0.10), transparent 70%),
                radial-gradient(ellipse at center, transparent 35%, rgba(6,3,0,0.6) 100%);

    --surface-sunk: #170f08;
    --surface-input: #160e07;
    --surface-raised: #22170d;
    --surface-chip: #2c1e11;
    --surface-selected: #36240f;
    --surface-field: #1a120a;
    --surface-card: linear-gradient(180deg, #2b1d11 0%, #1f150c 100%);
    --surface-sheet-card: linear-gradient(180deg, #24180d 0%, #1a1109 100%);
    --surface-modal: linear-gradient(180deg, #2c1e11 0%, #1a1109 100%);
    --surface-hero: radial-gradient(ellipse 70% 140% at 0% 0%, color-mix(in srgb, var(--accent-1) 10%, transparent), transparent 60%), linear-gradient(180deg, #2d1f12 0%, #1d140b 100%);
    --surface-panel: linear-gradient(180deg, #2b1d11 0%, #1f150c 100%);
    --btn-bg: #24180d;
    --picker-bg: #1a1109;
    --menu-hover: #33230f;
    --shade-20: rgba(8,4,0,0.22);
    --shade-30: rgba(8,4,0,0.32);
    --shade-40: rgba(8,4,0,0.42);
    --shade-60: rgba(8,4,0,0.62);
    --overlay: rgba(6,3,0,0.88);

    --border: #4e3a1f;
    --border-strong: #6a4f28;
    --border-soft: #3e2e18;
    --border-neutral: #4a3820;
    --border-faint: #34261a;
    --border-field: #5a4424;
    --border-chip: #4e3a1f;
    --border-hover: color-mix(in srgb, var(--accent-1) 55%, #6a4f28);
    --border-danger: #5a2a1a;
    --border-danger-soft: #4a2416;
    --border-info: #34465a;
    --frame-line: color-mix(in srgb, var(--accent-1) 30%, transparent);

    --text: #f2e4c8;
    --text-2: #e2d1b0;
    --text-soft: #d6c19c;
    --text-muted: #c2a97f;
    --text-label: #bba073;
    --text-dim: #b0956a;
    --text-faint: #a68b62;
    --text-ghost: #5e4526;
    --text-subtle: #b39a72;
    --text-hover: #e8d5ae;
    --text-btn: #bca37b;
    --text-icon: #b09670;
    --text-link: #cdb385;
    --text-close: #a98e66;
    --text-remove: #a98e66;
    --placeholder: #8c7552;
    --placeholder-strong: #8c7552;
    --placeholder-faint: #6a5030;
    --accent-text: color-mix(in srgb, var(--accent-1) 74%, #fff3d6);   /* lifted so dark accents stay readable */
    --danger-text: #ea6d55;
    --danger-strong: #e05a42;

    --tint-indigo: #1a1514;   --tint-indigo-line: rgba(120,110,230,0.32);
    --tint-emerald: #141812;  --tint-emerald-line: rgba(40,170,120,0.32);
    --tint-red: #2a130d;      --tint-red-line: rgba(190,60,40,0.35);
    --tint-violet: #21130f;   --tint-violet-line: rgba(130,60,150,0.35);
    --tint-amber: #2a1f0d;    --tint-amber-line: rgba(190,140,30,0.35);
    --tint-blue: #131819;     --tint-blue-line: rgba(60,120,170,0.35);
    --tint-danger: #2c160d;
    --tint-info: #15202a;
    --stat-box-bg: rgba(8,4,0,0.3);

    --badge-bg: rgba(8,4,0,0.4);
    --badge-line: rgba(190,140,60,0.14);

    --shadow-card: inset 0 1px 0 rgba(255,220,160,0.06), 0 1px 2px rgba(0,0,0,0.6), 0 12px 28px -14px rgba(0,0,0,0.9);
    --shadow-card-hover: inset 0 1px 0 rgba(255,220,160,0.08), 0 0 0 1px color-mix(in srgb, var(--accent-1) 25%, transparent), 0 14px 34px -14px color-mix(in srgb, var(--accent-1) 40%, transparent);
    --shadow-hero: inset 0 1px 0 rgba(255,220,160,0.07), 0 14px 34px -16px rgba(0,0,0,0.9);
    --shadow-menu: inset 0 1px 0 rgba(255,220,160,0.06), 0 16px 40px -8px rgba(0,0,0,0.85);
    --shadow-modal: inset 0 1px 0 rgba(255,220,160,0.08), 0 0 70px -20px rgba(255,150,60,0.35), 0 30px 70px -10px rgba(0,0,0,0.9);
    --cat-tint: 0%;                          /* this mode's cards keep their own surface */
}

/* Inside cards and dialogs, light mode uses slightly softer greys */
[data-mode="light"] :is(.creature-card, .modal-panel) {
    --page-bg: #fbf7ee;
}

/* =====================================================================================
   Bridge — the markup still uses fixed Tailwind colour classes (written for the dark
   palette). Each is mapped to a token ONCE here, so every mode follows automatically.
   New markup should use the token-based classes instead (see docs/THEMES.md).
   ===================================================================================== */

/* text */
.text-\[\#f5efe6\] { color: var(--text) !important; }
.text-\[\#e8e0d4\] { color: var(--text-2) !important; }
.text-\[\#a89880\] { color: var(--text-label) !important; }
.text-\[\#d4a017\] { color: var(--accent-text) !important; }
.text-\[\#6b5d4d\] { color: var(--text-subtle) !important; }
.hover\:text-\[\#d4a017\]:hover { color: var(--accent-text) !important; }
.text-zinc-300 { color: var(--text-soft) !important; }
.text-zinc-400 { color: var(--text-muted) !important; }
.text-zinc-500 { color: var(--text-dim) !important; }
.text-zinc-600 { color: var(--text-faint) !important; }
.text-zinc-700 { color: var(--text-ghost) !important; }
/* coloured text: modes may set --tone-* (light does); otherwise the Tailwind colour stays */
.text-red-300 { color: var(--tone-red, #fca5a5) !important; }
.text-red-400 { color: var(--tone-red, #f87171) !important; }
.text-red-500 { color: var(--tone-red-strong, #ef4444) !important; }
.text-purple-400 { color: var(--tone-purple, #c084fc) !important; }
.text-amber-200 { color: var(--tone-amber-soft, #fde68a) !important; }
.text-amber-300 { color: var(--tone-amber, #fcd34d) !important; }
.text-amber-400 { color: var(--tone-amber, #fbbf24) !important; }
.text-blue-200 { color: var(--tone-blue, #bfdbfe) !important; }
.text-blue-300 { color: var(--tone-blue, #93c5fd) !important; }
.text-blue-400 { color: var(--tone-blue, #60a5fa) !important; }
.text-indigo-300 { color: var(--tone-indigo, #a5b4fc) !important; }
.text-indigo-400 { color: var(--tone-indigo, #818cf8) !important; }
.text-purple-300 { color: var(--tone-purple, #d8b4fe) !important; }
.text-emerald-300 { color: var(--tone-emerald, #6ee7b7) !important; }
.text-emerald-400 { color: var(--tone-emerald, #34d399) !important; }
.text-emerald-500 { color: var(--tone-emerald, #10b981) !important; }
.text-green-400 { color: var(--tone-green, #4ade80) !important; }
.text-yellow-400 { color: var(--tone-yellow, #facc15) !important; }
.text-yellow-500 { color: var(--tone-yellow, #eab308) !important; }

/* backgrounds */
.bg-\[\#1a1714\] { background-color: var(--page-bg) !important; }
.bg-\[\#1a1714\]\/95 { background-color: color-mix(in srgb, var(--page-bg) 95%, transparent) !important; }
.bg-\[\#1e1b16\] { background-color: var(--surface-raised) !important; }
.bg-\[\#2a2418\], .hover\:bg-\[\#2a2418\]:hover { background-color: var(--surface-chip) !important; }
.bg-\[\#2a1a1a\] { background-color: var(--tint-danger) !important; }
.bg-\[\#2a1a2a\] { background-color: var(--tint-violet) !important; }
.bg-\[\#3d362a\] { background-color: var(--border) !important; }
.bg-\[\#d4a017\]\/5 { background-color: color-mix(in srgb, var(--accent-1) 5%, transparent) !important; }
.bg-\[\#1a2a3b\] { background-color: var(--tint-info) !important; }
.bg-\[\#14141c\] { background-color: var(--tint-indigo) !important; }
.bg-\[\#1c1414\] { background-color: var(--tint-red) !important; }
.bg-\[\#19141c\] { background-color: var(--tint-violet) !important; }
.bg-\[\#1c1a14\] { background-color: var(--tint-amber) !important; }
.bg-\[\#14181c\] { background-color: var(--tint-blue) !important; }
.bg-zinc-900 { background-color: var(--surface-sunk) !important; }
.bg-gray-800 { background-color: var(--surface-field) !important; }
.bg-black\/20 { background-color: var(--shade-20) !important; }
.bg-black\/40 { background-color: var(--shade-40) !important; }
.bg-black\/60 { background-color: var(--shade-60) !important; }

/* borders */
.border-\[\#3d362a\] { border-color: var(--border) !important; }
.border-\[\#4a3f30\] { border-color: var(--border-strong) !important; }
.border-\[\#363026\] { border-color: var(--border-soft) !important; }
.border-\[\#2a2418\] { border-color: var(--border-chip) !important; }
.border-\[\#4a2a2a\] { border-color: var(--border-danger) !important; }
.border-\[\#3d2a2a\] { border-color: var(--border-danger-soft) !important; }
.border-\[\#3d2a3d\] { border-color: var(--tint-violet-line) !important; }
.border-\[\#d4a017\]\/50 { border-color: color-mix(in srgb, var(--accent-1) 50%, transparent) !important; }
.border-\[\#2a3d5a\] { border-color: var(--border-info) !important; }
.border-\[\#d4a017\], .hover\:border-\[\#d4a017\]:hover { border-color: var(--accent-1) !important; }
.border-zinc-700 { border-color: var(--border-neutral) !important; }
.border-zinc-800 { border-color: var(--border-faint) !important; }
.border-gray-700 { border-color: var(--border-field) !important; }

/* accent-marked elements (js/core/theme.js sets only the --accent-* variables) */
[data-theme-level] { color: var(--accent-text) !important; }
.theme-dot-el[data-theme-level] { background-color: var(--accent-1) !important; }
[data-theme-border] { border-left-color: var(--accent-1) !important; }

/* form accents and placeholders */
.accent-\[\#d4a017\] { accent-color: var(--accent-1) !important; }
.placeholder-zinc-600::placeholder { color: var(--placeholder-strong) !important; }
.placeholder-zinc-700::placeholder { color: var(--placeholder-faint) !important; }