/* ===== SHADOW — the DARK base (moved out of styles.css 2026-09-14) =====
   What [data-theme="dark"] changes from Royal. The component-level dark fixes (the tag
   backgrounds, the scrims, the crest plate…) stay in styles.css beside the components they
   fix: they are dark's behaviour, and a skin over dark inherits them for free.
   Loaded from index.html after styles.css; see public/themes/README.md for the whole
   arrangement and _template.css for adding a theme. */
/* --- DARK MODE (Shadow/Evil Theme) --- */
[data-theme="dark"] {
    --bg-body: #0a0a0a;       /* Deep Black */
    --bg-panel: #141414;      /* Obsidian Cards */
    --nav-color: #000000;     /* Black Nav — solid; --bg-nav is derived (see royal.css, OVERLAY OPACITY) */
    
    --text-main: #e0e0e0;     /* Light Grey Text */
    --text-muted: #888888;
    --text-hint: #999999;     /* 6.94:1 on --bg-body */
    
    --gold: #b30000;          /* Blood Red (Replaces Gold) — fills, borders, glows */
    --gold-light: #2a0505;    /* Very dark red bg */
    /* #b30000 as TEXT measured 2.37-2.92:1 against every dark surface (body/panel/alt/nav
       and the gold-light pill) — under the 3:1 floor for LARGE text, let alone the 4.5:1
       AA threshold for the item names and links that used it. This lifted red clears 4.5:1
       on all five of those backgrounds while staying unmistakably blood red. Keep them in
       step: if --gold changes, re-measure this against --bg-alt, the lightest of them. */
    --gold-text: #ef5350;
    
    --border: #333333;        /* Dark Grey borders */
    --border-gold: #5c0000;   /* Dark Red border */

    /* Dark never redefined these three, so they kept their light values and glared.
       --ok stays a green (it means "done", not "gold"), just lifted for dark contrast. */
    --success: #2f9e63;
    --danger: #e05260;
    --info: #4bb3c4;
    --warn: #e0a33a;
    /* #e05260 as text measured 3.79:1 on the dark .tag grey (#2a2a2a) — that is the HP
       figure on every monster row in the Database, not an edge case. Lifting --danger
       itself would have made the white-on-danger FILLS worse (the notification and queue
       badges are #fff on #e05260, already only 3.79:1, and a lighter fill drops it
       further), so the text value moves alone. 5.17:1 on the tag grey, ~6.6-7.1:1 on the
       panel and body. Every `color:` use points here, including the error messages that
       JS assigns as `style.color` — those do not look like CSS, so search for both forms
       if this is ever re-audited. */
    --danger-text: #ff6b6b;
    --ok: #4fbe8a;

    /* Raised surfaces — a step LIGHTER than the panel here, the reverse of light mode */
    --bg-alt: #1c1c1c;
    --bg-card: #141414;
    --bg-input: #0f0f0f;

    --shadow-card: 0 4px 20px rgba(0,0,0,0.5);
    --shadow-hover: 0 8px 30px rgba(179, 0, 0, 0.25); /* Red Glow */

    /* The wash inverts with the theme — the SHAPE of it is the same vignette, only the ink
       changes. A white paper wash over a dark UI would be the one combination that cannot
       work, and leaving the backdrop unveiled would be worse still. Matched to --bg-body so
       the rim is indistinguishable from the page it replaces. */
    --paper-ink: 10, 10, 10;
    /* A DARK theme needs a HEAVIER wash than the light one for the same picture, which is the
       opposite of what intuition says. The reason is that the artwork is bright: a thin dark
       veil over a sunlit sky leaves a LIGHT background, and this theme's text is light. Swept
       against the real pixels, the floor here is 0.88 where light's is 0.60 —
       0.72 → 15 elements under AA, 0.80 → 6, 0.85 → 1, 0.88 → 0.
       If you want the picture to actually show in dark mode, the answer is not a thinner wash
       but a DARKER IMAGE: --backdrop is a token, so this block can point at its own file and
       then take a much lower alpha. That is what the token is for. */
    --paper-centre: 0.88;
    --paper-mid: 0.94;
}