/* themes.css: Legacy palettes: one body.theme-* block per users/themes.py key. */
/* ===== THEMES =====
   Each theme re-tints the same Deep-Field Observatory system: the type,
   layout, grain, and reward-glow language are constant; only color moves.
   Nebula (default) lives in :root above; theme-default inherits it as-is. */

/* Daylight Station (light): daytime observatory: lilac paper, petrol ink,
   teal + coral accents held over from the dark identity. */
body.theme-daylight {
    /* Darkened die-colour text so .slot-req clears 4.5:1 on this theme's --bg-subtle
       (#ece5f7); the die chips themselves keep the bright palette on their own fills. */
    --dice-red-text: #a32d16;
    --dice-green-text: #1c6b32;
    --dice-blue-text: #1b4f8f;
    --color-primary: #006b5c;
    --color-primary-dark: #005247;
    --color-violet: #5a35b5;
    --color-reward: #a52f54;
    --color-reward-ink: #a52f54;
    --color-success: #006b4f;
    --color-success-ink: #006b4f;
    --color-error: #a73540;
    --color-error-ink: #a73540;
    --color-warning: #805400;
    --color-warning-ink: #805400;
    --color-info: #00677d;
    --color-info-ink: #00677d;
    /* A light theme must redefine the whole semantic set, not only -ink. 128 rules
       read --color-*-text and only 11 read --color-*-ink, so a theme that stops at
       -ink inherits :root's dark-surface pale mint/pink/amber and paints it on white:
       measured 1.28-1.69:1 on the staff readouts, and the same on every reward,
       penalty and hint figure in the game. -bg/-border move with -text because the
       badges pair them; changing -text alone would put dark ink on :root's dark tint.
       See docs/ux-rules.md "Contrast". */
    --color-success-text: var(--color-success-ink);
    --color-success-bg: color-mix(in srgb, var(--color-success) 12%, var(--bg-surface));
    --color-success-border: color-mix(in srgb, var(--color-success) 45%, var(--border-color));
    --color-error-text: var(--color-error-ink);
    --color-error-bg: color-mix(in srgb, var(--color-error) 12%, var(--bg-surface));
    --color-error-border: color-mix(in srgb, var(--color-error) 45%, var(--border-color));
    --color-warning-text: var(--color-warning-ink);
    --color-warning-bg: color-mix(in srgb, var(--color-warning) 12%, var(--bg-surface));
    --color-warning-border: color-mix(in srgb, var(--color-warning) 45%, var(--border-color));
    --color-info-text: var(--color-info-ink);
    --color-info-bg: color-mix(in srgb, var(--color-info) 12%, var(--bg-surface));
    --color-info-border: color-mix(in srgb, var(--color-info) 45%, var(--border-color));
    --gradient-primary: linear-gradient(120deg, #006b5c 0%, #5a35b5 55%, #a52f54 100%);
    --glow-reward: 0 0 0 1px rgba(224,86,122,0.35), 0 0 20px rgba(224,86,122,0.22);
    --glow-accent: 0 0 18px rgba(14,158,134,0.18);
    --bg-body: #f2eef9;
    --bg-surface: #ffffff;
    --bg-subtle: #ece5f7;
    --bg-hover: #e4dbf3;
    --bg-elevated: #ffffff;
    --bg-cool: #e7f0f2;
    --text-primary: #1c1230;
    --text-secondary: #4b4066;
    --text-muted: #645a7d;           /* was #6d6389: 4.14 on --bg-hover */
    --text-inverse: #ffffff;
    --border-color: #ddd3ef;
    --border-subtle: #ece4f7;
    --shadow-sm: 0 1px 2px rgba(30,16,50,0.08);
    --shadow-md: 0 8px 22px rgba(30,16,50,0.10);
    --shadow-lg: 0 20px 46px rgba(30,16,50,0.14);
    --vignette: radial-gradient(125% 125% at 50% 32%, transparent 62%, rgba(28,18,48,0.06) 100%);
    color-scheme: light;
}

/* Aurora (dark): cold deep field: petrol base, aurora-teal + violet.
   Reads distinctly cooler than Nebula's plum. */
body.theme-aurora {
    --color-primary: #57e6c3;
    --color-primary-dark: #33b79a;
    --color-violet: #8f7bff;
    --color-reward: #ff7fa3;
    --color-error: #ff8a96;
    --color-error-ink: #ff8a96;
    --gradient-primary: linear-gradient(120deg, #57e6c3 0%, #8f7bff 55%, #ff7fa3 100%);
    --glow-reward: 0 0 0 1px rgba(255,127,163,0.42), 0 0 26px rgba(255,127,163,0.30);
    --glow-accent: 0 0 24px rgba(87,230,195,0.30);
    --bg-body: #071620;
    --bg-surface: #0e2532;
    --bg-subtle: #0a1c27;
    --bg-hover: #123243;
    --bg-elevated: #113040;
    --bg-cool: #0a2230;
    --text-primary: #e6f7fb;
    --text-secondary: #a3c6d3;
    --text-muted: #7ba0af;           /* already clears 4.5 everywhere (worst 4.79); left alone */
    --text-inverse: #071620;
    --border-color: #1c4155;
    --border-subtle: #143140;
    --vignette: radial-gradient(125% 125% at 50% 32%, transparent 58%, rgba(1,8,14,0.30) 100%);
    color-scheme: dark;
}

/* Comet Tail (light): dawn horizon: warm sand, coral + amber with a teal
   counter-accent so it stays in the same family as the others. */
body.theme-comet {
    /* See theme-daylight: same contrast fix against this theme's --bg-subtle (#f6e8da). */
    --dice-red-text: #a32d16;
    --dice-green-text: #1c6b32;
    --dice-blue-text: #1b4f8f;
    --color-primary: #9a330a;
    --color-primary-dark: #7f2a08;
    --color-violet: #8b2f68;
    --color-reward: #9b2c4d;
    --color-reward-ink: #9b2c4d;
    --color-success: #006b4f;
    --color-success-ink: #006b4f;
    --color-error: #a73540;
    --color-error-ink: #a73540;
    --color-warning: #805400;
    --color-warning-ink: #805400;
    --color-info: #00677d;
    --color-info-ink: #00677d;
    /* Light theme: see the note on theme-daylight's own copy of this block. */
    --color-success-text: var(--color-success-ink);
    --color-success-bg: color-mix(in srgb, var(--color-success) 12%, var(--bg-surface));
    --color-success-border: color-mix(in srgb, var(--color-success) 45%, var(--border-color));
    --color-error-text: var(--color-error-ink);
    --color-error-bg: color-mix(in srgb, var(--color-error) 12%, var(--bg-surface));
    --color-error-border: color-mix(in srgb, var(--color-error) 45%, var(--border-color));
    --color-warning-text: var(--color-warning-ink);
    --color-warning-bg: color-mix(in srgb, var(--color-warning) 12%, var(--bg-surface));
    --color-warning-border: color-mix(in srgb, var(--color-warning) 45%, var(--border-color));
    --color-info-text: var(--color-info-ink);
    --color-info-bg: color-mix(in srgb, var(--color-info) 12%, var(--bg-surface));
    --color-info-border: color-mix(in srgb, var(--color-info) 45%, var(--border-color));
    --gradient-primary: linear-gradient(120deg, #9a330a 0%, #8b2f68 55%, #0e6f70 100%);
    --glow-reward: 0 0 0 1px rgba(225,29,103,0.32), 0 0 20px rgba(225,29,103,0.22);
    --glow-accent: 0 0 18px rgba(194,65,12,0.16);
    --bg-body: #fbf2e9;
    --bg-surface: #fffaf4;
    --bg-subtle: #f6e8da;
    --bg-hover: #f2ddc9;
    --bg-elevated: #fffaf4;
    --bg-cool: #eef0e6;
    --text-primary: #2b1a12;
    --text-secondary: #6b4a37;
    --text-muted: #765a48;           /* was #8a6a54: failed on 4 of 6 backgrounds, worst 3.74 */
    --text-inverse: #fffaf4;
    --border-color: #ecd8c3;
    --border-subtle: #f4e6d6;
    --shadow-sm: 0 1px 2px rgba(60,30,12,0.08);
    --shadow-md: 0 8px 22px rgba(60,30,12,0.10);
    --shadow-lg: 0 20px 46px rgba(60,30,12,0.14);
    --vignette: radial-gradient(125% 125% at 50% 32%, transparent 62%, rgba(40,20,10,0.06) 100%);
    color-scheme: light;
}

/* Mosslight (dark): a living frontier glow for companions and discovery. */
body.theme-mosslight {
    --color-primary: #50e5bb;
    --color-primary-dark: #2ac29b;
    --color-violet: #a68cff;
    --color-reward: #f7b44a;
    --color-error: #ff8a96;
    --color-error-ink: #ff8a96;
    --gradient-primary: linear-gradient(120deg, #50e5bb 0%, #a68cff 55%, #f7b44a 100%);
    --glow-reward: 0 0 0 1px rgba(247,180,74,0.42), 0 0 26px rgba(247,180,74,0.28);
    --glow-accent: 0 0 24px rgba(80,229,187,0.28);
    --bg-body: #0c1717;
    --bg-surface: #112524;
    --bg-subtle: #0e1e1d;
    --bg-hover: #1b3734;
    --bg-elevated: #18312e;
    --bg-cool: #0e2228;
    --text-primary: #effff7;
    --text-secondary: #b7d9cc;
    --text-muted: #91b9aa;
    --text-inverse: #0c1717;
    --border-color: #2b544d;
    --border-subtle: #1d3c37;
    --vignette: radial-gradient(125% 125% at 50% 32%, transparent 58%, rgba(2,14,12,0.34) 100%);
    color-scheme: dark;
}

/* Emberwake (dark): warm signal light for dangerous routes and hard-won returns. */
body.theme-emberwake {
    --color-primary: #ffb15a;
    --color-primary-dark: #e4862a;
    --color-violet: #b78cff;
    --color-reward: #ff6f91;
    --gradient-primary: linear-gradient(120deg, #ffb15a 0%, #b78cff 55%, #ff6f91 100%);
    --glow-reward: 0 0 0 1px rgba(255,111,145,0.44), 0 0 26px rgba(255,111,145,0.30);
    --glow-accent: 0 0 24px rgba(255,177,90,0.28);
    --bg-body: #1a0f14;
    --bg-surface: #2a1720;
    --bg-subtle: #211218;
    --bg-hover: #3b1f2b;
    --bg-elevated: #341b27;
    --bg-cool: #1c1b29;
    --text-primary: #fff1eb;
    --text-secondary: #e4bdb3;
    --text-muted: #c08f89;
    --text-inverse: #1a0f14;
    --border-color: #5a2f39;
    --border-subtle: #3d222d;
    --vignette: radial-gradient(125% 125% at 50% 32%, transparent 58%, rgba(20,4,8,0.34) 100%);
    color-scheme: dark;
}

/* Surveyor (light): crisp, high-clarity instruments for focused command. */
body.theme-surveyor {
    --dice-red-text: #9f2616;
    --dice-green-text: #175c2c;
    --dice-blue-text: #17477f;
    --color-primary: #005f73;
    --color-primary-dark: #00495a;
    --color-violet: #5b21b6;
    --color-reward: #9b2c4d;
    --color-reward-ink: #9b2c4d;
    --color-success: #006b4f;
    --color-success-ink: #006b4f;
    --color-error: #a73540;
    --color-error-ink: #a73540;
    --color-warning: #805400;
    --color-warning-ink: #805400;
    --color-info: #00677d;
    --color-info-ink: #00677d;
    /* Light theme: see the note on theme-daylight's own copy of this block. */
    --color-success-text: var(--color-success-ink);
    --color-success-bg: color-mix(in srgb, var(--color-success) 12%, var(--bg-surface));
    --color-success-border: color-mix(in srgb, var(--color-success) 45%, var(--border-color));
    --color-error-text: var(--color-error-ink);
    --color-error-bg: color-mix(in srgb, var(--color-error) 12%, var(--bg-surface));
    --color-error-border: color-mix(in srgb, var(--color-error) 45%, var(--border-color));
    --color-warning-text: var(--color-warning-ink);
    --color-warning-bg: color-mix(in srgb, var(--color-warning) 12%, var(--bg-surface));
    --color-warning-border: color-mix(in srgb, var(--color-warning) 45%, var(--border-color));
    --color-info-text: var(--color-info-ink);
    --color-info-bg: color-mix(in srgb, var(--color-info) 12%, var(--bg-surface));
    --color-info-border: color-mix(in srgb, var(--color-info) 45%, var(--border-color));
    --gradient-primary: linear-gradient(120deg, #005f73 0%, #5b21b6 55%, #9b2c4d 100%);
    --glow-reward: 0 0 0 1px rgba(180,35,93,0.30), 0 0 18px rgba(180,35,93,0.16);
    --glow-accent: 0 0 16px rgba(0,95,115,0.14);
    --bg-body: #f4f7fb;
    --bg-surface: #ffffff;
    --bg-subtle: #e7eef6;
    --bg-hover: #dbe7f2;
    --bg-elevated: #ffffff;
    --bg-cool: #e4f1f3;
    --text-primary: #111827;
    --text-secondary: #374151;
    --text-muted: #4b5563;
    --text-inverse: #ffffff;
    --border-color: #9aaabd;
    --border-subtle: #d2dce7;
    --shadow-sm: 0 1px 2px rgba(15,23,42,0.08);
    --shadow-md: 0 8px 22px rgba(15,23,42,0.10);
    --shadow-lg: 0 20px 46px rgba(15,23,42,0.14);
    --vignette: radial-gradient(125% 125% at 50% 32%, transparent 62%, rgba(15,23,42,0.05) 100%);
    color-scheme: light;
}

/* Star-Touched (dark): the exact CELESTIAL_ANCHORS hues breeding rolls for
   (pets/genetics.py: violet, gold, deep blue), worn by the chrome itself.
   --color-reward is a lightened tint of the anchor blue (#2980B9), not the
   literal hex: the raw anchor fails 4.5:1 against this theme's own --bg-hover
   (worst background in every theme, see docs/ux-rules.md), so the token is
   raised per that doctrine while --gradient-primary keeps the literal three
   anchors in their genetics.py order. --color-violet is the literal anchor
   unmodified: it's exempt from the solid-token contrast rule (decorative/
   gradient use only), same as every other theme.
   This is also the one Legacy palette with its own desktop layout: see
   "Star-Touched layout" below, right after the sidebar rules it restyles.
   That layout is scoped away from Frontier, whose interface frame owns the
   desktop rail geometry. */
body.theme-star-touched {
    --color-primary: #F1C40F;
    --color-primary-dark: #cda30c;
    --color-violet: #8E44AD;
    --color-reward: #3fa0dd;
    --color-reward-ink: #3fa0dd;
    --gradient-primary: linear-gradient(120deg, #8E44AD 0%, #F1C40F 50%, #2980B9 100%);
    --glow-reward: 0 0 0 1px rgba(63,160,221,0.46), 0 0 26px rgba(63,160,221,0.30);
    --glow-accent: 0 0 24px rgba(241,196,15,0.26);
    --bg-body: #0b0716;
    --bg-surface: #150e28;
    --bg-subtle: #120c22;
    --bg-hover: #271c47;
    --bg-elevated: #1c1436;
    --bg-cool: #12102a;
    --text-primary: #f5eeff;
    --text-secondary: #b7a6d9;
    --text-muted: #9789c4;
    --text-inverse: #140b1e;
    --border-color: #362a5c;
    --border-subtle: #241a40;
    --vignette: radial-gradient(125% 125% at 50% 32%, transparent 58%, rgba(4,2,14,0.34) 100%);
    color-scheme: dark;
}

/* Rose Nebula (dark): the old Gothic Rose hues (rose into periwinkle) moved out
   into deep space: crimson-black depths, a dusky nebula-blue cool zone. The rose
   and periwinkle are lifted from Gothic's #b07090/#6b7fa8, which sat under 4.5:1
   on the raised surfaces, and --text-inverse is dark rather than Gothic's white
   (white on the rose accent failed for normal-weight text). */
body.theme-rose-nebula {
    --color-primary: #ea8fb6;
    --color-primary-dark: #c96d96;
    --color-violet: #8b9bd6;
    --color-reward: #9fb2ee;
    --color-reward-ink: #9fb2ee;
    --gradient-primary: linear-gradient(120deg, #ea8fb6 0%, #b98fd0 50%, #9fb2ee 100%);
    --glow-reward: 0 0 0 1px rgba(159,178,238,0.44), 0 0 26px rgba(159,178,238,0.30);
    --glow-accent: 0 0 24px rgba(234,143,182,0.28);
    --bg-body: #120810;
    --bg-surface: #1f0e19;
    --bg-subtle: #180a13;
    --bg-hover: #2e1424;
    --bg-elevated: #26111e;
    --bg-cool: #141026;
    --text-primary: #fce8f0;
    --text-secondary: #dcb3c5;
    --text-muted: #b98fa3;
    --text-inverse: #120810;
    --border-color: #45203a;
    --border-subtle: #2e1426;
    --vignette: radial-gradient(125% 125% at 50% 32%, transparent 58%, rgba(14,2,10,0.34) 100%);
    color-scheme: dark;
}

/* Hearth Dusk (dark): lantern gold and ember over a plum dusk, with sage-slate for the
   cool zones. Built from a plum/crimson/ember/gold/sage swatch set: the crimsons
   (#7a3045, #993d41) are too dark for text on these surfaces, so they live only in the
   preview and borders; the ember (#cd683d) is lifted to #ee8f62 to clear 4.5:1 on
   --bg-hover, and --color-error is lifted (as Aurora's is) because :root's #f2596a
   measured 3.94 there. */
body.theme-hearth-dusk {
    --color-primary: #fbb954;
    --color-primary-dark: #e09a3a;
    --color-violet: #b0607a;
    --color-reward: #ee8f62;
    --color-reward-ink: #ee8f62;
    --color-error: #ff8a96;
    --color-error-ink: #ff8a96;
    --gradient-primary: linear-gradient(120deg, #f2ec8b 0%, #fbb954 50%, #ee8f62 100%);
    --glow-reward: 0 0 0 1px rgba(238,143,98,0.44), 0 0 26px rgba(238,143,98,0.30);
    --glow-accent: 0 0 24px rgba(251,185,84,0.26);
    --bg-body: #1e1620;
    --bg-surface: #2e222f;
    --bg-subtle: #251b27;
    --bg-hover: #3d2c3d;
    --bg-elevated: #352737;
    --bg-cool: #262c31;
    --text-primary: #f7f1df;
    --text-secondary: #d9cdb8;
    --text-muted: #b4b8a6;
    --text-inverse: #1e1620;
    --border-color: #4f3a4c;
    --border-subtle: #392a3a;
    --vignette: radial-gradient(125% 125% at 50% 32%, transparent 58%, rgba(14,6,12,0.34) 100%);
    color-scheme: dark;
}

/* Tidelight (dark): mint and coral over an indigo night, cream for text. From a
   cream/coral/raspberry/plum/mint/teal/indigo/black swatch set: the coral (#db604c)
   is lifted to #f6917c for --bg-hover, the teal (#317c87) becomes the cool zone's
   tint, and --color-error is lifted (:root's #f2596a measured 4.19 on --bg-hover). */
body.theme-tidelight {
    --color-primary: #74c99e;
    --color-primary-dark: #4fae80;
    --color-violet: #c0507a;
    --color-reward: #f6917c;
    --color-reward-ink: #f6917c;
    --color-error: #ff8a96;
    --color-error-ink: #ff8a96;
    --gradient-primary: linear-gradient(120deg, #74c99e 0%, #3f9aa6 45%, #f6917c 100%);
    --glow-reward: 0 0 0 1px rgba(246,145,124,0.44), 0 0 26px rgba(246,145,124,0.30);
    --glow-accent: 0 0 24px rgba(116,201,158,0.28);
    --bg-body: #140f24;
    --bg-surface: #211845;
    --bg-subtle: #1a1333;
    --bg-hover: #2f2360;
    --bg-elevated: #281d52;
    --bg-cool: #0f2a30;
    --text-primary: #fbeedd;
    --text-secondary: #e6cfb4;
    --text-muted: #bfadc4;
    --text-inverse: #140f24;
    --border-color: #3d2f6e;
    --border-subtle: #2a2050;
    --vignette: radial-gradient(125% 125% at 50% 32%, transparent 58%, rgba(6,3,14,0.34) 100%);
    color-scheme: dark;
}

/* Orchard (light): leaf green and crimson on clean paper, slate for ink and sky-grey
   for the cool zones. From a charcoal/slate/leaf/wheat/terracotta/crimson swatch set:
   the bright leaf greens (#a8ed77, #5fbc62), wheat and terracotta are under 3:1 on a
   light surface, so they stay in the preview; the deep green (#326d42) and crimson
   (#932443) carry the signals as-is. */
body.theme-orchard {
    /* See theme-daylight: darkened die-colour text for this theme's --bg-subtle. */
    --dice-red-text: #9f2616;
    --dice-green-text: #175c2c;
    --dice-blue-text: #17477f;
    --color-primary: #326d42;
    --color-primary-dark: #285736;
    --color-violet: #5a7880;
    --color-reward: #932443;
    --color-reward-ink: #932443;
    --color-success: #1f6b45;
    --color-success-ink: #1f6b45;
    --color-error: #a73540;
    --color-error-ink: #a73540;
    --color-warning: #7a5200;
    --color-warning-ink: #7a5200;
    --color-info: #2f6170;
    --color-info-ink: #2f6170;
    /* Light theme: see the note on theme-daylight's own copy of this block. */
    --color-success-text: var(--color-success-ink);
    --color-success-bg: color-mix(in srgb, var(--color-success) 12%, var(--bg-surface));
    --color-success-border: color-mix(in srgb, var(--color-success) 45%, var(--border-color));
    --color-error-text: var(--color-error-ink);
    --color-error-bg: color-mix(in srgb, var(--color-error) 12%, var(--bg-surface));
    --color-error-border: color-mix(in srgb, var(--color-error) 45%, var(--border-color));
    --color-warning-text: var(--color-warning-ink);
    --color-warning-bg: color-mix(in srgb, var(--color-warning) 12%, var(--bg-surface));
    --color-warning-border: color-mix(in srgb, var(--color-warning) 45%, var(--border-color));
    --color-info-text: var(--color-info-ink);
    --color-info-bg: color-mix(in srgb, var(--color-info) 12%, var(--bg-surface));
    --color-info-border: color-mix(in srgb, var(--color-info) 45%, var(--border-color));
    --gradient-primary: linear-gradient(120deg, #326d42 0%, #5a7880 55%, #932443 100%);
    --glow-reward: 0 0 0 1px rgba(147,36,67,0.30), 0 0 18px rgba(147,36,67,0.16);
    --glow-accent: 0 0 16px rgba(50,109,66,0.16);
    --bg-body: #f2f2f2;
    --bg-surface: #ffffff;
    --bg-subtle: #e8ebe8;
    --bg-hover: #dde3dd;
    --bg-elevated: #ffffff;
    --bg-cool: #e3edf1;
    --text-primary: #1b1f1d;
    --text-secondary: #2e3a43;
    --text-muted: #4f5d63;
    --text-inverse: #ffffff;
    --border-color: #c3ccc6;
    --border-subtle: #e1e6e2;
    --shadow-sm: 0 1px 2px rgba(27,31,29,0.08);
    --shadow-md: 0 8px 22px rgba(27,31,29,0.10);
    --shadow-lg: 0 20px 46px rgba(27,31,29,0.14);
    --vignette: radial-gradient(125% 125% at 50% 32%, transparent 62%, rgba(27,31,29,0.05) 100%);
    color-scheme: light;
}

/* Firefly Creek (dark): firefly gold over a navy night, mint for rewards and teal for
   the cool zones. From a navy/teal/mint/rust/gold/peach/maroon/red swatch set: the gold
   (#de9a26) is lifted to #ecab3c for --bg-hover, the maroons and rust stay out (they
   crowd Rose Nebula and Emberwake), and the red (#ff443b) is softened to #ff8a80 for
   errors so it clears 4.5:1 and reads apart from the gold. */
body.theme-firefly-creek {
    --color-primary: #ecab3c;
    --color-primary-dark: #d08f22;
    --color-violet: #22ab80;
    --color-reward: #7dffd4;
    --color-reward-ink: #7dffd4;
    --color-error: #ff8a80;
    --color-error-ink: #ff8a80;
    --color-warning: #ffc68c;
    --color-warning-ink: #ffc68c;
    --gradient-primary: linear-gradient(120deg, #ecab3c 0%, #22ab80 55%, #7dffd4 100%);
    --glow-reward: 0 0 0 1px rgba(125,255,212,0.40), 0 0 26px rgba(125,255,212,0.26);
    --glow-accent: 0 0 24px rgba(236,171,60,0.28);
    --bg-body: #00152b;
    --bg-surface: #001e3d;
    --bg-subtle: #001a34;
    --bg-hover: #062e56;
    --bg-elevated: #03284d;
    --bg-cool: #002f36;
    --text-primary: #e6fff7;
    --text-secondary: #b8e2d6;
    --text-muted: #8fbdb3;
    --text-inverse: #00152b;
    --border-color: #12416a;
    --border-subtle: #0a2c4d;
    --vignette: radial-gradient(125% 125% at 50% 32%, transparent 58%, rgba(0,4,12,0.34) 100%);
    color-scheme: dark;
}

/* Slate Hollow (dark): rain-sky blue and wheat over slate stone, cream for text. From
   an autumn swatch set (browns, plum, mustard, olive, slate, sky, lilac): the plum and
   brown half is left out because it reads as Hearth Dusk, so the slate (#384150) is
   the hover surface and the rest are darker steps of it. --color-error is lifted
   (:root's #f2596a fails on the slate hover). */
body.theme-slate-hollow {
    --color-primary: #90b5c6;
    --color-primary-dark: #6e97aa;
    --color-violet: #ab99a4;
    --color-reward: #dac282;
    --color-reward-ink: #dac282;
    --color-error: #ff8a96;
    --color-error-ink: #ff8a96;
    --gradient-primary: linear-gradient(120deg, #90b5c6 0%, #ab99a4 50%, #dac282 100%);
    --glow-reward: 0 0 0 1px rgba(218,194,130,0.42), 0 0 26px rgba(218,194,130,0.26);
    --glow-accent: 0 0 24px rgba(144,181,198,0.26);
    --bg-body: #171a22;
    --bg-surface: #232a36;
    --bg-subtle: #1d222c;
    --bg-hover: #384150;
    --bg-elevated: #2c3442;
    --bg-cool: #1f2b33;
    --text-primary: #f5efe8;
    --text-secondary: #d8ccd2;
    --text-muted: #b3c0ca;
    --text-inverse: #171a22;
    --border-color: #46505f;
    --border-subtle: #2f3744;
    --vignette: radial-gradient(125% 125% at 50% 32%, transparent 58%, rgba(6,8,14,0.32) 100%);
    color-scheme: dark;
}

/* High Contrast (dark): a deliberately spare palette for maximum separation.
   Accent and status colors remain decorative signals; words and symbols carry
   the meaning everywhere else. */
body.theme-high-contrast {
    --color-primary: #00ffff;
    --color-primary-dark: #00cccc;
    --color-violet: #d8b4fe;
    --color-reward: #ffcc00;
    --color-reward-ink: #ffcc00;
    --gradient-primary: linear-gradient(120deg, #00ffff 0%, #d8b4fe 55%, #ffcc00 100%);
    --glow-reward: 0 0 0 2px #ffcc00;
    --glow-accent: 0 0 0 2px #00ffff;
    --bg-body: #000000;
    --bg-surface: #080808;
    --bg-subtle: #141414;
    --bg-hover: #242424;
    --bg-elevated: #101010;
    --bg-cool: #06131a;
    --text-primary: #ffffff;
    --text-secondary: #ffffff;
    --text-muted: #e6e6e6;
    --text-inverse: #000000;
    --border-color: #b8b8b8;
    --border-subtle: #707070;
    --vignette: none;
    --color-success: #00ff99;
    --color-success-ink: #00ff99;
    --color-success-text: #9affd8;
    --color-error: #ff6b7a;
    --color-error-ink: #ff6b7a;
    --color-error-text: #ffc0c8;
    --color-warning: #ffcc00;
    --color-warning-ink: #ffcc00;
    --color-warning-text: #ffe680;
    --color-info: #00d9ff;
    --color-info-ink: #00d9ff;
    --color-info-text: #a8efff;
    color-scheme: dark;
}

/* Colorblind Safe (dark): blue, orange, and magenta are kept distinct, while
   every status also has a text label or symbol in the markup. */
body.theme-colorblind-safe {
    --color-primary: #56b4e9;
    --color-primary-dark: #2c8dc4;
    --color-violet: #cc79a7;
    --color-reward: #e69f00;
    --color-reward-ink: #e69f00;
    --gradient-primary: linear-gradient(120deg, #56b4e9 0%, #cc79a7 55%, #e69f00 100%);
    --glow-reward: 0 0 0 1px rgba(230,159,0,0.62), 0 0 20px rgba(230,159,0,0.26);
    --glow-accent: 0 0 20px rgba(86,180,233,0.24);
    --bg-body: #081522;
    --bg-surface: #0e2232;
    --bg-subtle: #0a1b2a;
    --bg-hover: #15364c;
    --bg-elevated: #123047;
    --bg-cool: #0a2630;
    --text-primary: #f7fbff;
    --text-secondary: #d5e9f2;
    --text-muted: #b9d7e6;
    --text-inverse: #081522;
    --border-color: #42657a;
    --border-subtle: #29485d;
    --vignette: radial-gradient(125% 125% at 50% 32%, transparent 58%, rgba(1,8,14,0.28) 100%);
    --color-success: #25c997;
    --color-success-ink: #25c997;
    --color-success-text: #8de8c7;
    --color-error: #ff6b6b;
    --color-error-ink: #ff6b6b;
    --color-error-text: #ffb886;
    --color-warning: #e69f00;
    --color-warning-ink: #e69f00;
    --color-warning-text: #ffd77a;
    --color-info: #56b4e9;
    --color-info-text: #a8dcf5;
    color-scheme: dark;
}

/* Reactive decoration: weather can tint local surfaces, but never reassigns
   the semantic primary/text/border tokens that communicate state. Unknown
   weather keys intentionally inherit the current palette's accent. */
body {
    --flux-accent: var(--color-primary);
    --flux-wash: color-mix(in srgb, var(--flux-accent) 10%, var(--bg-cool));
}
body[data-flux="stardust-drizzle"] { --flux-accent: #60e6cf; }
body[data-flux="aurora-veil"] { --flux-accent: #b89cff; }
body[data-flux="void-fog"] { --flux-accent: #d982b5; }
body[data-flux="comet-shower"] { --flux-accent: #f3b45b; }
body[data-flux="clear-skies"] { --flux-accent: var(--color-primary); }
body[data-flux]:not([data-flux=""]) .conditions-strip {
    background: var(--flux-wash);
    border-color: color-mix(in srgb, var(--flux-accent) 42%, var(--border-subtle));
}

/* Surface dialect proof of concept: each named page gets a faint local
   material cue. The same cards, type, buttons, and state semantics remain in
   place; this is a decorative layer, not a second theme system. */
[data-surface] {
    --surface-accent: color-mix(in srgb, var(--flux-accent) 44%, var(--color-violet));
    border-radius: var(--radius-lg);
    background-color: color-mix(in srgb, var(--bg-body) 96%, var(--surface-accent));
}
[data-surface="command-post"] {
    background-image: radial-gradient(circle at 78% 4%, color-mix(in srgb, var(--surface-accent) 14%, transparent), transparent 28rem);
}
[data-surface="star-map"] {
    background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--surface-accent) 5%, transparent) 0 1px, transparent 1px 34px);
}
/* No background-image here (unlike the other named surfaces): its radial gradient was
   centered at 18% 8%, almost exactly where the page-header eyebrow/title sit, so under a
   vivid flux accent (e.g. Aurora Veil) it read as a pale highlighted box directly behind
   the header text rather than the faint ambient wash the other surfaces manage by keeping
   their gradient's hot spot away from the header (command-post's is offset to 78% from the
   left, well clear of its left-aligned title). Keeps the shared [data-surface] tint/radius
   below, just not this page's own gradient layer. */
[data-surface="incursion"] {
    background-image: linear-gradient(110deg, color-mix(in srgb, var(--surface-accent) 7%, transparent), transparent 34%, color-mix(in srgb, var(--color-reward) 4%, transparent));
}