/* ============================================================
   intensitynews THEMES - 6 dark + 6 light
   Ported from vanilla layout.php inline styles.
   ============================================================ */

html { scrollbar-gutter: stable; }
html[data-mode="dark"]  { color-scheme: dark; }
html[data-mode="light"] { color-scheme: light; }

[in-cloak] { display: none !important; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes streak-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.streak-anim { animation: streak-pulse 1.5s ease-in-out infinite; }
.pred-card:hover { transform: translateY(-2px); }
.pred-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ---------- DARK THEMES ---------- */

[data-theme="dark-midnight"] {
    --bg-body: #0f1419; --bg-card: #1a2029; --bg-raised: #232c37; --bg-sunken: #0a0e12;
    --border-1: #2c3642; --border-2: #3a4553;
    --text-1: #ededed; --text-2: #c5cad2; --text-3: #8a9098; --text-4: #5a616a; --text-5: #3a4048;
    --accent: #e6e8ec; --accent-fg: #0f1419; --accent-hv: #ffffff;
}

[data-theme="dark-carbon"] {
    --bg-body: #171717; --bg-card: #232323; --bg-raised: #2e2e2e; --bg-sunken: #0f0f0f;
    --border-1: #363636; --border-2: #454545;
    --text-1: #ededed; --text-2: #c8c8c8; --text-3: #909090; --text-4: #606060; --text-5: #3e3e3e;
    --accent: #ededed; --accent-fg: #171717; --accent-hv: #ffffff;
}

[data-theme="dark-espresso"] {
    --bg-body: #1a1612; --bg-card: #26201a; --bg-raised: #322a22; --bg-sunken: #12100c;
    --border-1: #3b332a; --border-2: #4c4234;
    --text-1: #f0e8dc; --text-2: #d6cab8; --text-3: #9a8f7e; --text-4: #685e50; --text-5: #423c34;
    --accent: #e8dcc4; --accent-fg: #1a1612; --accent-hv: #f5ebd4;
}

[data-theme="dark-slate"] {
    --bg-body: #141a21; --bg-card: #1f262f; --bg-raised: #2a323c; --bg-sunken: #0e1318;
    --border-1: #323b47; --border-2: #424b58;
    --text-1: #e6edf3; --text-2: #b8c2ce; --text-3: #7d8794; --text-4: #545d6b; --text-5: #363e48;
    --accent: #e6edf3; --accent-fg: #141a21; --accent-hv: #ffffff;
}

[data-theme="dark-forest"] {
    --bg-body: #121813; --bg-card: #1c241e; --bg-raised: #262f28; --bg-sunken: #0c110d;
    --border-1: #2f3831; --border-2: #3e4840;
    --text-1: #eaf0ea; --text-2: #c2cbc4; --text-3: #859088; --text-4: #576058; --text-5: #373f38;
    --accent: #e6ece6; --accent-fg: #121813; --accent-hv: #f4f8f4;
}

[data-theme="dark-oled"] {
    --bg-body: #000000; --bg-card: #141414; --bg-raised: #1f1f1f; --bg-sunken: #000000;
    --border-1: #2a2a2a; --border-2: #3a3a3a;
    --text-1: #ededed; --text-2: #c5c5c5; --text-3: #8a8a8a; --text-4: #5a5a5a; --text-5: #3a3a3a;
    --accent: #ededed; --accent-fg: #000000; --accent-hv: #ffffff;
}

/* ---------- LIGHT THEMES ---------- */

[data-theme="light-paper"] {
    --bg-body: #faf8f3; --bg-card: #ffffff; --bg-raised: #f3efe6; --bg-sunken: #ede8dc;
    --border-1: #e5dfd0; --border-2: #d4ccb8;
    --text-1: #1a1814; --text-2: #3d3a32; --text-3: #6a665a; --text-4: #98938a; --text-5: #c4beb0;
    --accent: #1a1814; --accent-fg: #faf8f3; --accent-hv: #000000;
}

[data-theme="light-arctic"] {
    --bg-body: #f5f8fb; --bg-card: #ffffff; --bg-raised: #eaf0f6; --bg-sunken: #e1e8f0;
    --border-1: #dbe3ec; --border-2: #c4cfdc;
    --text-1: #0f1419; --text-2: #2d3640; --text-3: #5d6875; --text-4: #8a95a2; --text-5: #b8c2cd;
    --accent: #0f1419; --accent-fg: #ffffff; --accent-hv: #000000;
}

[data-theme="light-sepia"] {
    --bg-body: #f3eadb; --bg-card: #faf3e4; --bg-raised: #ebe1cc; --bg-sunken: #e3d8c0;
    --border-1: #dccfaf; --border-2: #c9b98e;
    --text-1: #2a2318; --text-2: #4a3f2d; --text-3: #7a6d54; --text-4: #a89878; --text-5: #c9b98e;
    --accent: #2a2318; --accent-fg: #f3eadb; --accent-hv: #1a1510;
}

[data-theme="light-mint"] {
    --bg-body: #f4faf6; --bg-card: #ffffff; --bg-raised: #e9f3ed; --bg-sunken: #dfecde;
    --border-1: #d9e6de; --border-2: #bfd4c7;
    --text-1: #10201a; --text-2: #2d4036; --text-3: #5a6f62; --text-4: #8a9a90; --text-5: #b8c5bd;
    --accent: #10201a; --accent-fg: #ffffff; --accent-hv: #000000;
}

[data-theme="light-stone"] {
    --bg-body: #f5f5f5; --bg-card: #ffffff; --bg-raised: #ebebeb; --bg-sunken: #e0e0e0;
    --border-1: #dddddd; --border-2: #c4c4c4;
    --text-1: #1a1a1a; --text-2: #3a3a3a; --text-3: #6a6a6a; --text-4: #959595; --text-5: #c0c0c0;
    --accent: #1a1a1a; --accent-fg: #ffffff; --accent-hv: #000000;
}

[data-theme="light-rose"] {
    --bg-body: #fbf6f4; --bg-card: #ffffff; --bg-raised: #f3ebe7; --bg-sunken: #ebdfd9;
    --border-1: #e8dcd6; --border-2: #d4c0b6;
    --text-1: #1f1816; --text-2: #3e2e29; --text-3: #6e5a52; --text-4: #9c8a82; --text-5: #c8b8af;
    --accent: #1f1816; --accent-fg: #fbf6f4; --accent-hv: #000000;
}

/* ============================================================
   TAILWIND OVERRIDES - theme-aware surface/text/border mappings
   ============================================================ */

body { background-color: var(--bg-body) !important; color: var(--text-1); }

/* Surfaces */
.bg-white    { background-color: var(--bg-card)   !important; }
.bg-gray-50  { background-color: var(--bg-body)   !important; }
.bg-gray-100 { background-color: var(--bg-raised) !important; }
.bg-gray-200 { background-color: var(--bg-raised) !important; }
.bg-gray-900 { background-color: var(--accent)    !important; color: var(--accent-fg) !important; }
.bg-gray-800 { background-color: var(--accent)    !important; color: var(--accent-fg) !important; }
.hover\:bg-gray-800:hover { background-color: var(--accent-hv) !important; color: var(--accent-fg) !important; }
.hover\:bg-gray-900:hover { background-color: var(--accent-hv) !important; color: var(--accent-fg) !important; }
.hover\:bg-gray-50:hover  { background-color: var(--bg-raised) !important; }
.hover\:bg-gray-100:hover { background-color: var(--bg-raised) !important; }

/* Borders */
.border-gray-50   { border-color: var(--border-1) !important; }
.border-gray-100  { border-color: var(--border-1) !important; }
.border-gray-200  { border-color: var(--border-1) !important; }
.border-gray-300  { border-color: var(--border-2) !important; }
.hover\:border-gray-300:hover { border-color: var(--border-2) !important; }
.hover\:border-gray-400:hover { border-color: var(--border-2) !important; }

/* Text */
.text-gray-900 { color: var(--text-1) !important; }
.text-gray-800 { color: var(--text-1) !important; }
.text-gray-700 { color: var(--text-2) !important; }
.text-gray-600 { color: var(--text-2) !important; }
.text-gray-500 { color: var(--text-3) !important; }
.text-gray-400 { color: var(--text-3) !important; }
.text-gray-300 { color: var(--text-4) !important; }
.text-white    { color: var(--accent-fg) !important; }

/* Restore real white text on colored buttons */
.bg-green-500  .text-white, .bg-green-600  .text-white,
.bg-red-500    .text-white, .bg-red-600    .text-white,
.bg-blue-500   .text-white, .bg-blue-600   .text-white,
.bg-orange-500 .text-white, .bg-orange-600 .text-white,
.bg-purple-500 .text-white, .bg-purple-600 .text-white,
.bg-amber-500  .text-white, .bg-amber-600  .text-white { color: #ffffff !important; }
button.bg-green-600, button.bg-red-600, button.bg-blue-600,
button.bg-orange-600, button.bg-orange-500, button.bg-purple-600,
button.bg-amber-600, button.bg-red-500,
a.bg-green-600, a.bg-red-600, a.bg-blue-600 { color: #ffffff !important; }

/* Dark mode tinted cards */
html[data-mode="dark"] .bg-green-50     { background-color: #0f2a18 !important; }
html[data-mode="dark"] .bg-green-50\/40 { background-color: #0d1f13 !important; }
html[data-mode="dark"] .bg-green-100    { background-color: #153a20 !important; }
html[data-mode="dark"] .border-green-100 { border-color: #1e4a2c !important; }
html[data-mode="dark"] .border-green-200 { border-color: #225235 !important; }
html[data-mode="dark"] .text-green-700  { color: #86efac !important; }
html[data-mode="dark"] .text-green-600  { color: #4ade80 !important; }
html[data-mode="dark"] .text-green-500  { color: #4ade80 !important; }

html[data-mode="dark"] .bg-red-50     { background-color: #2a0f0f !important; }
html[data-mode="dark"] .bg-red-50\/40 { background-color: #1c0a0a !important; }
html[data-mode="dark"] .bg-red-100    { background-color: #3a1515 !important; }
html[data-mode="dark"] .border-red-100 { border-color: #4a1e1e !important; }
html[data-mode="dark"] .border-red-200 { border-color: #522222 !important; }
html[data-mode="dark"] .text-red-700  { color: #fca5a5 !important; }
html[data-mode="dark"] .text-red-600  { color: #f87171 !important; }
html[data-mode="dark"] .text-red-500  { color: #ef4444 !important; }

html[data-mode="dark"] .bg-orange-50     { background-color: #2a1a0a !important; }
html[data-mode="dark"] .bg-orange-50\/40 { background-color: #1c1107 !important; }
html[data-mode="dark"] .bg-orange-100    { background-color: #3a2310 !important; }
html[data-mode="dark"] .border-orange-100 { border-color: #4a2e15 !important; }
html[data-mode="dark"] .border-orange-200 { border-color: #523418 !important; }
html[data-mode="dark"] .border-orange-300 { border-color: #6b4a20 !important; }
html[data-mode="dark"] .text-orange-800  { color: #fed7aa !important; }
html[data-mode="dark"] .text-orange-700  { color: #fdba74 !important; }
html[data-mode="dark"] .text-orange-600  { color: #fb923c !important; }
html[data-mode="dark"] .text-orange-500  { color: #f97316 !important; }

html[data-mode="dark"] .bg-blue-50     { background-color: #0a1a2a !important; }
html[data-mode="dark"] .bg-blue-50\/40 { background-color: #07101c !important; }
html[data-mode="dark"] .bg-blue-100    { background-color: #10253a !important; }
html[data-mode="dark"] .border-blue-100 { border-color: #152f4a !important; }
html[data-mode="dark"] .border-blue-200 { border-color: #1a3752 !important; }
html[data-mode="dark"] .border-blue-300 { border-color: #224a6b !important; }
html[data-mode="dark"] .text-blue-800  { color: #93c5fd !important; }
html[data-mode="dark"] .text-blue-700  { color: #7bb0e0 !important; }
html[data-mode="dark"] .text-blue-600  { color: #60a5fa !important; }
html[data-mode="dark"] .text-blue-500  { color: #3b82f6 !important; }

html[data-mode="dark"] .bg-yellow-50     { background-color: #2a2410 !important; }
html[data-mode="dark"] .bg-yellow-50\/40 { background-color: #1c1807 !important; }
html[data-mode="dark"] .bg-yellow-100    { background-color: #3a321a !important; }
html[data-mode="dark"] .border-yellow-100 { border-color: #4a3f20 !important; }
html[data-mode="dark"] .border-yellow-200 { border-color: #524525 !important; }
html[data-mode="dark"] .text-yellow-800  { color: #fde68a !important; }
html[data-mode="dark"] .text-yellow-700  { color: #fcd34d !important; }
html[data-mode="dark"] .text-yellow-600  { color: #fbbf24 !important; }

html[data-mode="dark"] .bg-purple-50  { background-color: #1c1030 !important; }
html[data-mode="dark"] .bg-purple-100 { background-color: #2a1a40 !important; }
html[data-mode="dark"] .border-purple-100 { border-color: #3a2252 !important; }
html[data-mode="dark"] .border-purple-200 { border-color: #452a60 !important; }
html[data-mode="dark"] .text-purple-700 { color: #c4b5fd !important; }
html[data-mode="dark"] .text-purple-600 { color: #a78bfa !important; }

html[data-mode="dark"] .bg-amber-50  { background-color: #2a1f0a !important; }
html[data-mode="dark"] .bg-amber-100 { background-color: #3a2c10 !important; }
html[data-mode="dark"] .border-amber-100 { border-color: #4a3915 !important; }
html[data-mode="dark"] .border-amber-200 { border-color: #52411a !important; }
html[data-mode="dark"] .border-amber-300 { border-color: #6b522a !important; }
html[data-mode="dark"] .text-amber-800 { color: #fcd34d !important; }
html[data-mode="dark"] .text-amber-700 { color: #fbbf24 !important; }
html[data-mode="dark"] .text-amber-600 { color: #f59e0b !important; }

/* Inputs */
input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="number"], input[type="datetime-local"],
input[type="search"], textarea, select {
    background-color: var(--bg-raised) !important;
    color: var(--text-1) !important;
    border-color: var(--border-1) !important;
}
input::placeholder, textarea::placeholder { color: var(--text-4) !important; }

/* Dark mode gradients */
html[data-mode="dark"] .bg-gradient-to-r,
html[data-mode="dark"] .bg-gradient-to-l,
html[data-mode="dark"] .bg-gradient-to-t,
html[data-mode="dark"] .bg-gradient-to-b,
html[data-mode="dark"] .bg-gradient-to-tr,
html[data-mode="dark"] .bg-gradient-to-tl,
html[data-mode="dark"] .bg-gradient-to-br,
html[data-mode="dark"] .bg-gradient-to-bl {
    background-image: none !important;
    background-color: var(--bg-raised) !important;
}
html[data-mode="dark"] .from-gray-900.to-gray-800,
html[data-mode="dark"] .from-gray-800.to-gray-900 {
    background-image: none !important;
    background-color: var(--accent) !important;
    color: var(--accent-fg) !important;
}

/* Dividers */
.divide-gray-100 > * + * { border-color: var(--border-1) !important; }
.divide-gray-200 > * + * { border-color: var(--border-1) !important; }

/* Rings */
.ring-gray-200, .ring-gray-300 { --tw-ring-color: var(--border-2) !important; }
.focus\:ring-gray-300:focus { --tw-ring-color: var(--border-2) !important; }
.focus\:ring-gray-400:focus { --tw-ring-color: var(--border-2) !important; }

/* Code / mono */
code, .font-mono { color: var(--text-2); }

/* Tables */
th { background-color: var(--bg-raised) !important; }

/* ============================================================
   NAVBAR - independent theme via data-nav-theme on <html>
   ============================================================ */

/* Each nav-theme defines 6 variables that the navbar uses. The 12 themes are
   designed to be visibly distinct from each other - strongly saturated hues
   rather than neutral-with-a-tint. */
[data-nav-theme="dark-midnight"] {
    /* Deep navy blue */
    --nav-bg: #0e1a40; --nav-text: #dfe6ff; --nav-muted: #7d8cbc;
    --nav-border: #1e2e66; --nav-hover: #162456; --nav-active-bg: #1a2a60;
}
[data-nav-theme="dark-carbon"] {
    /* Neutral pure black-grey (reference point, no hue) */
    --nav-bg: #1a1a1a; --nav-text: #ededed; --nav-muted: #909090;
    --nav-border: #363636; --nav-hover: #262626; --nav-active-bg: #2e2e2e;
}
[data-nav-theme="dark-espresso"] {
    /* Warm coffee brown */
    --nav-bg: #3a2417; --nav-text: #f6dfc0; --nav-muted: #b79274;
    --nav-border: #553622; --nav-hover: #49301d; --nav-active-bg: #51372a;
}
[data-nav-theme="dark-slate"] {
    /* Cool steel blue-grey */
    --nav-bg: #1f2d3d; --nav-text: #d0dce8; --nav-muted: #6e8196;
    --nav-border: #344557; --nav-hover: #273a4d; --nav-active-bg: #2d4258;
}
[data-nav-theme="dark-forest"] {
    /* Deep emerald green */
    --nav-bg: #0f2a1a; --nav-text: #cfeadb; --nav-muted: #6f9582;
    --nav-border: #1e4a2c; --nav-hover: #173722; --nav-active-bg: #1c4028;
}
[data-nav-theme="dark-oled"] {
    /* Pure black, minimum bleed */
    --nav-bg: #000000; --nav-text: #ededed; --nav-muted: #7a7a7a;
    --nav-border: #222222; --nav-hover: #111111; --nav-active-bg: #1a1a1a;
}
[data-nav-theme="light-paper"] {
    /* Warm cream */
    --nav-bg: #fdf6d9; --nav-text: #2a220e; --nav-muted: #7a6a3c;
    --nav-border: #ecddaa; --nav-hover: #f6eaba; --nav-active-bg: #f1e2a3;
}
[data-nav-theme="light-arctic"] {
    /* Sky blue */
    --nav-bg: #d8ecfa; --nav-text: #0c1c2e; --nav-muted: #4f6c8a;
    --nav-border: #a9ceea; --nav-hover: #c4e0f3; --nav-active-bg: #b9d8ee;
}
[data-nav-theme="light-sepia"] {
    /* Tan / sand */
    --nav-bg: #ead8a0; --nav-text: #2a2010; --nav-muted: #755f32;
    --nav-border: #d0b473; --nav-hover: #e0cb8c; --nav-active-bg: #dabf7d;
}
[data-nav-theme="light-mint"] {
    /* Fresh mint green */
    --nav-bg: #c9edd2; --nav-text: #0d2518; --nav-muted: #4a7357;
    --nav-border: #92cfa2; --nav-hover: #b8e1c2; --nav-active-bg: #ade0bb;
}
[data-nav-theme="light-stone"] {
    /* Neutral pure grey */
    --nav-bg: #d8d8d8; --nav-text: #161616; --nav-muted: #555555;
    --nav-border: #b2b2b2; --nav-hover: #c7c7c7; --nav-active-bg: #bebebe;
}
[data-nav-theme="light-rose"] {
    /* Soft pink */
    --nav-bg: #f7c8cf; --nav-text: #3a1217; --nav-muted: #8c4a55;
    --nav-border: #e898a5; --nav-hover: #f0b6bf; --nav-active-bg: #eeaab5;
}

/* Navbar element overrides - higher specificity than the global theme rules.
   We also re-scope the generic surface/border vars inside <nav> so any
   .bg-white / .bg-gray-* / .border-gray-* panel (dropdowns, mobile menu,
   future cards) automatically uses nav-theme colors instead of the body
   theme. This keeps background and text in the SAME theme so contrast
   never collapses when the user mixes a dark nav with a different body. */
nav {
    --bg-card: var(--nav-active-bg);
    --bg-raised: var(--nav-hover);
    --border-1: var(--nav-border);
    --border-2: var(--nav-border);
    --text-1: var(--nav-text);
    --text-2: var(--nav-text);
    --text-3: var(--nav-muted);
    --text-4: var(--nav-muted);
}
nav.bg-white {
    background-color: var(--nav-bg) !important;
    border-color: var(--nav-border) !important;
}
nav .border-b,
nav .border-gray-100,
nav .border-gray-200,
nav .border-gray-300 {
    border-color: var(--nav-border) !important;
}
nav .text-gray-400,
nav .text-gray-500 {
    color: var(--nav-muted) !important;
}
nav .text-gray-600,
nav .text-gray-700,
nav .text-gray-800,
nav .text-gray-900 {
    color: var(--nav-text) !important;
}
nav .bg-gray-100,
nav .bg-gray-50 {
    background-color: var(--nav-active-bg) !important;
}
/* Panels/dropdowns inside the navbar (e.g. user dropdown, mobile menu)
   use the slightly raised nav surface so they stay readable and still
   pop visually against the nav bar itself. Do NOT set `color` here -
   that cascades via !important and stomps on .text-red-600/.text-orange-*
   children. The nav .text-gray-* rules below handle gray text, and colored
   text classes keep their own hue. */
nav .bg-white {
    background-color: var(--nav-active-bg) !important;
}
nav .hover\:bg-gray-50:hover,
nav .hover\:bg-gray-100:hover {
    background-color: var(--nav-hover) !important;
}
nav .hover\:text-gray-700:hover,
nav .hover\:text-gray-600:hover {
    color: var(--nav-text) !important;
}
/* Search input in navbar - adapt to nav theme */
nav input[type="text"] {
    background-color: var(--nav-active-bg) !important;
    color: var(--nav-text) !important;
    border-color: var(--nav-border) !important;
}
nav input[type="text"]::placeholder {
    color: var(--nav-muted) !important;
}
/* Focus state for the search input: when it gets focus:bg-white, stay on nav theme */
nav input[type="text"]:focus {
    background-color: var(--nav-hover) !important;
    color: var(--nav-text) !important;
}

/* ============================================================
   SUBNAV - independent theme via data-subnav-theme on <html>
   Used by news sub-nav (Top/New/Best...) and admin sub-nav.
   ============================================================ */

[data-subnav-theme="dark-midnight"] {
    --subnav-bg: #0f1419; --subnav-text: #ededed; --subnav-muted: #8a9098;
    --subnav-border: #2c3642; --subnav-active: #232c37;
}
[data-subnav-theme="dark-carbon"] {
    --subnav-bg: #171717; --subnav-text: #ededed; --subnav-muted: #909090;
    --subnav-border: #363636; --subnav-active: #2e2e2e;
}
[data-subnav-theme="dark-espresso"] {
    --subnav-bg: #1a1612; --subnav-text: #f0e8dc; --subnav-muted: #9a8f7e;
    --subnav-border: #3b332a; --subnav-active: #322a22;
}
[data-subnav-theme="dark-slate"] {
    --subnav-bg: #141a21; --subnav-text: #e6edf3; --subnav-muted: #7d8794;
    --subnav-border: #323b47; --subnav-active: #2a323c;
}
[data-subnav-theme="dark-forest"] {
    --subnav-bg: #121813; --subnav-text: #eaf0ea; --subnav-muted: #859088;
    --subnav-border: #2f3831; --subnav-active: #262f28;
}
[data-subnav-theme="dark-oled"] {
    --subnav-bg: #000000; --subnav-text: #ededed; --subnav-muted: #8a8a8a;
    --subnav-border: #2a2a2a; --subnav-active: #1f1f1f;
}
[data-subnav-theme="light-paper"] {
    --subnav-bg: #faf8f3; --subnav-text: #1a1814; --subnav-muted: #6a665a;
    --subnav-border: #e5dfd0; --subnav-active: #f3efe6;
}
[data-subnav-theme="light-arctic"] {
    --subnav-bg: #f5f8fb; --subnav-text: #0f1419; --subnav-muted: #5d6875;
    --subnav-border: #dbe3ec; --subnav-active: #eaf0f6;
}
[data-subnav-theme="light-sepia"] {
    --subnav-bg: #f3eadb; --subnav-text: #2a2318; --subnav-muted: #6e624a;
    --subnav-border: #e2d6b8; --subnav-active: #ebe1cc;
}
[data-subnav-theme="light-mint"] {
    --subnav-bg: #f4faf6; --subnav-text: #10201a; --subnav-muted: #5e7068;
    --subnav-border: #d9e8df; --subnav-active: #e9f3ed;
}
[data-subnav-theme="light-stone"] {
    --subnav-bg: #f5f5f5; --subnav-text: #1a1a1a; --subnav-muted: #666666;
    --subnav-border: #dcdcdc; --subnav-active: #ebebeb;
}
[data-subnav-theme="light-rose"] {
    --subnav-bg: #fbf6f4; --subnav-text: #1f1816; --subnav-muted: #6e605b;
    --subnav-border: #ead9d2; --subnav-active: #f3ebe7;
}

/* ============================================================
   FOOTER - independent theme via data-footer-theme on <html>
   ============================================================ */

[data-footer-theme="dark-midnight"] {
    --footer-bg: #1a2029; --footer-text: #c5cad2; --footer-muted: #8a9098;
    --footer-border: #2c3642; --footer-link-hover: #ededed;
}
[data-footer-theme="dark-carbon"] {
    --footer-bg: #232323; --footer-text: #c8c8c8; --footer-muted: #909090;
    --footer-border: #363636; --footer-link-hover: #ededed;
}
[data-footer-theme="dark-espresso"] {
    --footer-bg: #26201a; --footer-text: #d6cab8; --footer-muted: #9a8f7e;
    --footer-border: #3b332a; --footer-link-hover: #f0e8dc;
}
[data-footer-theme="dark-slate"] {
    --footer-bg: #1f262f; --footer-text: #b8c2ce; --footer-muted: #7d8794;
    --footer-border: #323b47; --footer-link-hover: #e6edf3;
}
[data-footer-theme="dark-forest"] {
    --footer-bg: #1c241e; --footer-text: #c2cbc4; --footer-muted: #859088;
    --footer-border: #2f3831; --footer-link-hover: #eaf0ea;
}
[data-footer-theme="dark-oled"] {
    --footer-bg: #0a0a0a; --footer-text: #c5c5c5; --footer-muted: #8a8a8a;
    --footer-border: #2a2a2a; --footer-link-hover: #ededed;
}
[data-footer-theme="light-paper"] {
    --footer-bg: #f3efe6; --footer-text: #3d3a32; --footer-muted: #6a665a;
    --footer-border: #e5dfd0; --footer-link-hover: #1a1814;
}
[data-footer-theme="light-arctic"] {
    --footer-bg: #eaf0f6; --footer-text: #2d3640; --footer-muted: #5d6875;
    --footer-border: #dbe3ec; --footer-link-hover: #0f1419;
}
[data-footer-theme="light-sepia"] {
    --footer-bg: #ebe1cc; --footer-text: #3d3528; --footer-muted: #6e624a;
    --footer-border: #d6c8a4; --footer-link-hover: #2a2318;
}
[data-footer-theme="light-mint"] {
    --footer-bg: #e9f3ed; --footer-text: #243530; --footer-muted: #5e7068;
    --footer-border: #d2e3d8; --footer-link-hover: #10201a;
}
[data-footer-theme="light-stone"] {
    --footer-bg: #ebebeb; --footer-text: #2e2e2e; --footer-muted: #666666;
    --footer-border: #d4d4d4; --footer-link-hover: #1a1a1a;
}
[data-footer-theme="light-rose"] {
    --footer-bg: #f3ebe7; --footer-text: #3a2e29; --footer-muted: #6e605b;
    --footer-border: #e2cec7; --footer-link-hover: #1f1816;
}

/* Re-scope surface/text vars inside footer so any .bg-white / .text-gray-*
   descendant uses the footer theme, keeping background and text in the same
   palette regardless of how the user mixed body/footer themes. */
footer {
    --bg-card: var(--footer-bg);
    --bg-raised: var(--footer-bg);
    --border-1: var(--footer-border);
    --border-2: var(--footer-border);
    --text-1: var(--footer-text);
    --text-2: var(--footer-text);
    --text-3: var(--footer-muted);
    --text-4: var(--footer-muted);
}
footer.bg-white,
footer {
    background-color: var(--footer-bg) !important;
    border-color: var(--footer-border) !important;
}
footer .bg-white {
    background-color: var(--footer-bg) !important;
}
footer .text-gray-400,
footer .text-gray-500 {
    color: var(--footer-muted) !important;
}
footer .text-gray-600,
footer .text-gray-700,
footer .text-gray-800,
footer .text-gray-900 {
    color: var(--footer-text) !important;
}
footer a:hover,
footer .hover\:text-gray-600:hover,
footer .hover\:text-gray-700:hover {
    color: var(--footer-link-hover) !important;
}
footer .border-gray-100,
footer .border-gray-200,
footer .border-gray-300 {
    border-color: var(--footer-border) !important;
}

/* ============================================================
   CONTENT AREA - independent theme via data-content-theme on <html>
   Controls the cards/containers inside the page (the "content" area).
   ============================================================ */

[data-content-theme="dark-midnight"] {
    --content-bg: #1a2029; --content-raised: #232c37; --content-border: #2c3642; --content-text: #ededed;
}
[data-content-theme="dark-carbon"] {
    --content-bg: #232323; --content-raised: #2e2e2e; --content-border: #363636; --content-text: #ededed;
}
[data-content-theme="dark-espresso"] {
    --content-bg: #26201a; --content-raised: #322a22; --content-border: #3b332a; --content-text: #f0e8dc;
}
[data-content-theme="dark-slate"] {
    --content-bg: #1f262f; --content-raised: #2a323c; --content-border: #323b47; --content-text: #e6edf3;
}
[data-content-theme="dark-forest"] {
    --content-bg: #1c241e; --content-raised: #262f28; --content-border: #2f3831; --content-text: #eaf0ea;
}
[data-content-theme="dark-oled"] {
    --content-bg: #141414; --content-raised: #1f1f1f; --content-border: #2a2a2a; --content-text: #ededed;
}
[data-content-theme="light-paper"] {
    --content-bg: #ffffff; --content-raised: #f3efe6; --content-border: #e5dfd0; --content-text: #1a1814;
}
[data-content-theme="light-arctic"] {
    --content-bg: #ffffff; --content-raised: #eaf0f6; --content-border: #dbe3ec; --content-text: #0f1419;
}
[data-content-theme="light-sepia"] {
    --content-bg: #faf3e4; --content-raised: #ebe1cc; --content-border: #e2d6b8; --content-text: #2a2318;
}
[data-content-theme="light-mint"] {
    --content-bg: #ffffff; --content-raised: #e9f3ed; --content-border: #d9e8df; --content-text: #10201a;
}
[data-content-theme="light-stone"] {
    --content-bg: #ffffff; --content-raised: #ebebeb; --content-border: #dcdcdc; --content-text: #1a1a1a;
}
[data-content-theme="light-rose"] {
    --content-bg: #ffffff; --content-raised: #f3ebe7; --content-border: #ead9d2; --content-text: #1f1816;
}

/* Map content theme to the existing --bg-card, --bg-raised, --border-*, --text-*
   inside <main> so the navbar/footer/subnav stay independent. We also override
   --text-1/2 with --content-text so text on content surfaces always pairs with
   the content background, even when body and content themes differ. */
main.flex-1 {
    --bg-card: var(--content-bg);
    --bg-raised: var(--content-raised);
    --border-1: var(--content-border);
    --border-2: var(--content-border);
    --text-1: var(--content-text);
    --text-2: var(--content-text);
}