/* =============================================================================
   MARKETVEST DIGITAL PROJECT CONTROL TOWER — THEME TOKENS
   -----------------------------------------------------------------------------
   Single source of visual truth. Every screen in every app — desktop and
   mobile — reads only from these tokens. Nothing below this file hard-codes a
   colour.

   The 16 base themes are ported from the QSprint design system
   (QSprint/frontend/app/globals.css) so the two products stay recognisably
   from the same house. They are *enhanced* here, not copied verbatim:

     · --surface-3 / --elev-*   a third surface + a real elevation ramp, because
                                a control tower stacks panels three deep and two
                                surfaces ran out.
     · --chart-1..8             a per-theme categorical chart ramp. QSprint drew
                                charts in --primary and tints of it; a portfolio
                                dashboard plots eight series at once.
     · --glow                   dark themes needed a light source, not just a
                                shadow, or every panel reads as a flat sticker.
     · --grid-line              the faint rule behind charts and gantt tracks.
     · --rail-*                 promoted from :root-only to per-theme, so the
                                nav rail on a light theme is no longer forced
                                navy regardless of the brand.
     · --faint / --border-strong / --info   the tokens the dense screens kept
                                reaching for and having to fake with opacity.

   Four MarketVest-native themes are added on top:
   marketvest, marketvest-dark, solar-flare, carbon.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   RAG — red / amber / green, and only ever those.

   Project health is a traffic light. Its job is to be readable at a glance
   across a portfolio of two dozen projects, and that reading is carried by the
   colour, not the label — nobody scans twenty-four rows for the phrase
   "At risk".

   These sit deliberately OUTSIDE the theme blocks. A brand palette owns the
   buttons and the chrome; it does not get to own the traffic light. Ocean Blue
   is monochrome-blue by client request, which would otherwise render "On track"
   and "Critical" as two shades of one hue on the single control where the
   difference matters most.
   -------------------------------------------------------------------------- */
:root {
  --rag-green: #16a34a;
  --rag-amber: #d97706;
  --rag-red:   #dc2626;
  --rag-grey:  #94a3b8;
  --rag-blue:  #2563eb;
}

/* Dark surfaces need lighter, less saturated RAG or the red goes muddy. */
[data-theme="quadrant-dark"],
[data-theme="midnight"],
[data-theme="liquid-glass"],
[data-theme="ai-futurism"],
[data-theme="dark-console"],
[data-theme="luxury"],
[data-theme="cyberpunk"],
[data-theme="marketvest-dark"],
[data-theme="solar-flare"],
[data-theme="carbon"] {
  --rag-green: #34d399;
  --rag-amber: #fbbf24;
  --rag-red:   #fb7185;
  --rag-grey:  #7d8da3;
  --rag-blue:  #60a5fa;
}

/* =============================================================================
   PROFESSIONAL GROUP
   ========================================================================== */

/* --- MarketVest (product default) -------------------------------------------
   Infrastructure navy + solar amber. Navy carries the chrome and the authority;
   amber is held back almost entirely for energy — generation figures,
   irradiance, the whole Solar app — so that by the time a screen goes amber the
   viewer already reads amber as power. Deep teal is the positive/confirm. */
:root,
[data-theme="marketvest"] {
  --bg: #f2f6fb;
  --surface: #ffffff;
  --surface-2: #eef3f9;
  --surface-3: #e4ebf4;
  --text: #0b1b2d;
  --muted: #5a6e86;
  --faint: #8fa1b6;
  --border: #dde5f0;
  --border-strong: #c3d0e2;
  --primary: #0e4d92;
  --secondary: #0f766e;
  --accent: #f59e0b;
  --success: #15803d;
  --warning: #b45309;
  --error: #dc2626;
  --info: #0369a1;
  --radius: 12px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --brand-grad: linear-gradient(135deg, #0e4d92, #0f766e);
  --accent-grad: linear-gradient(135deg, #f59e0b, #ea580c);
  --bg-fx: radial-gradient(1000px 560px at 88% -12%, rgba(14,77,146,.10), transparent 62%),
           radial-gradient(760px 520px at -4% 108%, rgba(245,158,11,.09), transparent 58%);
  --glass: 0;
  --grid-line: rgba(11,27,45,.07);
  --glow: none;
  --elev-1: 0 1px 2px rgba(11,27,45,.05);
  --elev-2: 0 1px 2px rgba(11,27,45,.05), 0 8px 24px rgba(11,27,45,.07);
  --elev-3: 0 2px 4px rgba(11,27,45,.06), 0 20px 48px rgba(11,27,45,.12);
  --chart-1: #0e4d92; --chart-2: #f59e0b; --chart-3: #0f766e; --chart-4: #7c3aed;
  --chart-5: #dc2626; --chart-6: #0891b2; --chart-7: #65a30d; --chart-8: #db2777;
  --rail: #0a2540; --rail-2: #103a5e; --rail-line: rgba(255,255,255,.09);
  --rail-text: #f4f9ff; --rail-muted: rgba(230,240,252,.66); --rail-accent: #f59e0b;
}

/* --- Ocean Blue — monochrome blue only, status colours included ------------- */
[data-theme="blue"] {
  --bg: #f4fbfe; --surface: #ffffff; --surface-2: #e3f3fa; --surface-3: #d3ebf5;
  --text: #04263b; --muted: #33627a; --faint: #5e93a8;
  --border: #b0e4eb; --border-strong: #8ed3e0;
  --primary: #0081b3; --secondary: #34a7e9; --accent: #3bbddf;
  --success: #64c3ea; --warning: #387a9b; --error: #004572; --info: #0081b3;
  --radius: 12px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --brand-grad: linear-gradient(135deg, #0081b3, #3bbddf);
  --accent-grad: linear-gradient(135deg, #34a7e9, #64c3ea);
  --bg-fx: radial-gradient(900px 500px at 85% -10%, rgba(59,189,223,.14), transparent 60%),
           radial-gradient(700px 500px at 5% 100%, rgba(169,222,255,.20), transparent 60%);
  --glass: 0; --grid-line: rgba(4,38,59,.08); --glow: none;
  --elev-1: 0 1px 2px rgba(0,69,114,.06);
  --elev-2: 0 1px 2px rgba(0,69,114,.08), 0 8px 24px rgba(0,129,179,.10);
  --elev-3: 0 2px 6px rgba(0,69,114,.10), 0 20px 44px rgba(0,129,179,.16);
  --chart-1: #004572; --chart-2: #0081b3; --chart-3: #34a7e9; --chart-4: #3bbddf;
  --chart-5: #64c3ea; --chart-6: #387a9b; --chart-7: #9ad8ee; --chart-8: #16607f;
  --rail: #06405c; --rail-2: #0a5c80; --rail-line: rgba(255,255,255,.10);
  --rail-text: #f2fbff; --rail-muted: rgba(225,244,252,.70); --rail-accent: #64c3ea;
}

/* --- Royal Blue — pure white ground, saturated true-blue ramp --------------- */
[data-theme="royal-blue"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #eef4ff; --surface-3: #e0eaff;
  --text: #0a1930; --muted: #556274; --faint: #94a3b8;
  --border: #cddbf2; --border-strong: #a9c1e8;
  --primary: #1d4ed8; --secondary: #2563eb; --accent: #3b82f6;
  --success: #0ea5e9; --warning: #0c4a6e; --error: #172554; --info: #2563eb;
  --radius: 12px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --brand-grad: linear-gradient(135deg, #1d4ed8, #3b82f6);
  --accent-grad: linear-gradient(135deg, #2563eb, #60a5fa);
  --bg-fx: radial-gradient(900px 500px at 85% -10%, rgba(37,99,235,.08), transparent 60%);
  --glass: 0; --grid-line: rgba(10,25,48,.07); --glow: none;
  --elev-1: 0 1px 2px rgba(10,25,48,.06);
  --elev-2: 0 1px 2px rgba(10,25,48,.08), 0 8px 24px rgba(29,78,216,.10);
  --elev-3: 0 2px 6px rgba(10,25,48,.10), 0 20px 44px rgba(29,78,216,.16);
  --chart-1: #172554; --chart-2: #1d4ed8; --chart-3: #3b82f6; --chart-4: #60a5fa;
  --chart-5: #93c5fd; --chart-6: #0c4a6e; --chart-7: #0ea5e9; --chart-8: #1e3a8a;
  --rail: #10245c; --rail-2: #1d4ed8; --rail-line: rgba(255,255,255,.10);
  --rail-text: #f5f8ff; --rail-muted: rgba(226,236,255,.70); --rail-accent: #60a5fa;
}

/* --- Quadrant Light --------------------------------------------------------- */
[data-theme="quadrant"] {
  --bg: #f4f7fb; --surface: #ffffff; --surface-2: #eef3f9; --surface-3: #e3ebf4;
  --text: #0d1b2a; --muted: #5c6e84; --faint: #93a3b6;
  --border: #e1e8f1; --border-strong: #c8d4e3;
  --primary: #1273e6; --secondary: #2fa268; --accent: #7c5cfc;
  --success: #16a34a; --warning: #d97706; --error: #dc2626; --info: #1273e6;
  --radius: 12px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --brand-grad: linear-gradient(135deg, #1273e6, #2fa268);
  --accent-grad: linear-gradient(135deg, #7c5cfc, #1273e6);
  --bg-fx: radial-gradient(900px 500px at 85% -10%, rgba(18,115,230,.09), transparent 60%),
           radial-gradient(700px 500px at 0% 110%, rgba(47,162,104,.07), transparent 55%);
  --glass: 0; --grid-line: rgba(13,27,42,.07); --glow: none;
  --elev-1: 0 1px 2px rgba(13,27,42,.05);
  --elev-2: 0 1px 2px rgba(13,27,42,.05), 0 8px 24px rgba(13,27,42,.06);
  --elev-3: 0 2px 6px rgba(13,27,42,.08), 0 20px 44px rgba(13,27,42,.12);
  --chart-1: #1273e6; --chart-2: #2fa268; --chart-3: #7c5cfc; --chart-4: #d97706;
  --chart-5: #dc2626; --chart-6: #0891b2; --chart-7: #db2777; --chart-8: #65a30d;
  --rail: #0a2540; --rail-2: #103a5e; --rail-line: rgba(255,255,255,.09);
  --rail-text: #f4f9ff; --rail-muted: rgba(230,240,252,.66); --rail-accent: #2fa268;
}

/* --- Enterprise SaaS -------------------------------------------------------- */
[data-theme="enterprise"] {
  --bg: #f5f7fb; --surface: #ffffff; --surface-2: #eef2f8; --surface-3: #e3e9f3;
  --text: #0e1726; --muted: #5a6b82; --faint: #93a1b5;
  --border: #e2e8f2; --border-strong: #c9d4e5;
  --primary: #2f6bff; --secondary: #6366f1; --accent: #14b8a6;
  --success: #16a34a; --warning: #d97706; --error: #dc2626; --info: #2f6bff;
  --radius: 12px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --brand-grad: linear-gradient(135deg, #2f6bff, #6366f1);
  --accent-grad: linear-gradient(135deg, #14b8a6, #2f6bff);
  --bg-fx: radial-gradient(900px 500px at 85% -10%, rgba(47,107,255,.10), transparent 60%);
  --glass: 0; --grid-line: rgba(14,23,38,.07); --glow: none;
  --elev-1: 0 1px 2px rgba(16,23,42,.06);
  --elev-2: 0 1px 2px rgba(16,23,42,.06), 0 8px 24px rgba(16,23,42,.06);
  --elev-3: 0 2px 6px rgba(16,23,42,.08), 0 20px 44px rgba(16,23,42,.12);
  --chart-1: #2f6bff; --chart-2: #6366f1; --chart-3: #14b8a6; --chart-4: #f59e0b;
  --chart-5: #ef4444; --chart-6: #8b5cf6; --chart-7: #06b6d4; --chart-8: #84cc16;
  --rail: #10203f; --rail-2: #1c3566; --rail-line: rgba(255,255,255,.10);
  --rail-text: #f4f7ff; --rail-muted: rgba(228,236,252,.68); --rail-accent: #14b8a6;
}

/* --- Minimal ---------------------------------------------------------------- */
[data-theme="minimal"] {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f7f8fa; --surface-3: #eff1f4;
  --text: #111318; --muted: #6b7280; --faint: #9ca3af;
  --border: #ebedf1; --border-strong: #d4d8df;
  --primary: #111318; --secondary: #1273e6; --accent: #1273e6;
  --success: #1a8f3c; --warning: #b25e00; --error: #d12f2f; --info: #1273e6;
  --radius: 10px;
  --font: "Inter", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --brand-grad: linear-gradient(135deg, #111318, #3a3f4a);
  --accent-grad: linear-gradient(135deg, #1273e6, #60a5fa);
  --bg-fx: none;
  --glass: 0; --grid-line: rgba(17,19,24,.07); --glow: none;
  --elev-1: 0 1px 2px rgba(0,0,0,.04);
  --elev-2: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  --elev-3: 0 2px 6px rgba(0,0,0,.06), 0 20px 44px rgba(0,0,0,.10);
  --chart-1: #111318; --chart-2: #1273e6; --chart-3: #6b7280; --chart-4: #b25e00;
  --chart-5: #d12f2f; --chart-6: #1a8f3c; --chart-7: #7c3aed; --chart-8: #0891b2;
  --rail: #111318; --rail-2: #262a33; --rail-line: rgba(255,255,255,.09);
  --rail-text: #ffffff; --rail-muted: rgba(255,255,255,.62); --rail-accent: #1273e6;
}

/* --- Gold ------------------------------------------------------------------- */
[data-theme="gold"] {
  --bg: #f8f8f7; --surface: #ffffff; --surface-2: #fcfbf9; --surface-3: #f4f1ea;
  --text: #1a1a1a; --muted: #5f6368; --faint: #9a9ea3;
  --border: #ececec; --border-strong: #d8d4cb;
  --primary: #d69200; --secondary: #d69200; --accent: #8b5cf6;
  --success: #22a447; --warning: #d69200; --error: #f15a29; --info: #8b5cf6;
  --radius: 20px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --brand-grad: linear-gradient(135deg, #d69200, #f0b429);
  --accent-grad: linear-gradient(135deg, #f0b429, #fcd34d);
  --bg-fx: radial-gradient(900px 500px at 85% -10%, rgba(214,146,0,.08), transparent 60%);
  --glass: 0; --grid-line: rgba(26,26,26,.07); --glow: none;
  --elev-1: 0 2px 8px rgba(0,0,0,.03);
  --elev-2: 0 4px 24px rgba(0,0,0,.05);
  --elev-3: 0 8px 44px rgba(0,0,0,.10);
  --chart-1: #d69200; --chart-2: #f0b429; --chart-3: #8b5cf6; --chart-4: #22a447;
  --chart-5: #f15a29; --chart-6: #0891b2; --chart-7: #a16207; --chart-8: #64748b;
  --rail: #241c05; --rail-2: #4a3a0c; --rail-line: rgba(255,255,255,.09);
  --rail-text: #fdf8ec; --rail-muted: rgba(250,242,222,.66); --rail-accent: #f0b429;
}

/* =============================================================================
   DARK GROUP
   ========================================================================== */

/* --- MarketVest Dark — the control-tower default for the operations demo ---- */
[data-theme="marketvest-dark"] {
  --bg: #070e1a; --surface: #0d1728; --surface-2: #132038; --surface-3: #1a2a47;
  --text: #e8f0fb; --muted: #8ba2c0; --faint: #5f7794;
  --border: #1d3050; --border-strong: #2b4470;
  --primary: #3d8bfd; --secondary: #2dd4bf; --accent: #fbbf24;
  --success: #34d399; --warning: #fbbf24; --error: #fb7185; --info: #60a5fa;
  --radius: 12px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --brand-grad: linear-gradient(135deg, #3d8bfd, #2dd4bf);
  --accent-grad: linear-gradient(135deg, #fbbf24, #f97316);
  --bg-fx: radial-gradient(900px 560px at 88% -8%, rgba(61,139,253,.18), transparent 58%),
           radial-gradient(760px 540px at -4% 106%, rgba(251,191,36,.10), transparent 60%);
  --glass: 0; --grid-line: rgba(232,240,251,.07);
  --glow: 0 0 0 1px rgba(61,139,253,.12), 0 0 32px rgba(61,139,253,.10);
  --elev-1: 0 1px 0 rgba(255,255,255,.03), 0 2px 8px rgba(0,0,0,.35);
  --elev-2: 0 0 0 1px rgba(61,139,253,.08), 0 12px 36px rgba(0,0,0,.45);
  --elev-3: 0 0 0 1px rgba(61,139,253,.14), 0 24px 60px rgba(0,0,0,.60);
  --chart-1: #3d8bfd; --chart-2: #fbbf24; --chart-3: #2dd4bf; --chart-4: #a78bfa;
  --chart-5: #fb7185; --chart-6: #38bdf8; --chart-7: #a3e635; --chart-8: #f472b6;
  --rail: #071120; --rail-2: #14294a; --rail-line: rgba(255,255,255,.07);
  --rail-text: #eaf2ff; --rail-muted: rgba(200,218,242,.60); --rail-accent: #fbbf24;
}

/* --- Quadrant Dark ---------------------------------------------------------- */
[data-theme="quadrant-dark"] {
  --bg: #0a1220; --surface: #101c30; --surface-2: #16253e; --surface-3: #1d3050;
  --text: #e6eefb; --muted: #8ba0bd; --faint: #64799a;
  --border: #1f3350; --border-strong: #2d4870;
  --primary: #3f92f5; --secondary: #3fbc80; --accent: #9d85ff;
  --success: #34d399; --warning: #fbbf24; --error: #fb7185; --info: #3f92f5;
  --radius: 12px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --brand-grad: linear-gradient(135deg, #3f92f5, #3fbc80);
  --accent-grad: linear-gradient(135deg, #9d85ff, #3f92f5);
  --bg-fx: radial-gradient(800px 500px at 90% -5%, rgba(63,146,245,.16), transparent 55%),
           radial-gradient(700px 500px at 0% 105%, rgba(63,188,128,.10), transparent 60%);
  --glass: 0; --grid-line: rgba(230,238,251,.07);
  --glow: 0 0 0 1px rgba(63,146,245,.12), 0 0 28px rgba(63,146,245,.10);
  --elev-1: 0 1px 0 rgba(255,255,255,.03), 0 2px 8px rgba(0,0,0,.32);
  --elev-2: 0 0 0 1px rgba(63,146,245,.10), 0 12px 40px rgba(0,0,0,.40);
  --elev-3: 0 0 0 1px rgba(63,146,245,.16), 0 24px 60px rgba(0,0,0,.55);
  --chart-1: #3f92f5; --chart-2: #3fbc80; --chart-3: #9d85ff; --chart-4: #fbbf24;
  --chart-5: #fb7185; --chart-6: #38bdf8; --chart-7: #f472b6; --chart-8: #a3e635;
  --rail: #081020; --rail-2: #16294a; --rail-line: rgba(255,255,255,.07);
  --rail-text: #e9f1ff; --rail-muted: rgba(198,214,240,.60); --rail-accent: #3fbc80;
}

/* --- Midnight Console ------------------------------------------------------- */
[data-theme="midnight"] {
  --bg: #0b0e12; --surface: #12161c; --surface-2: #171d25; --surface-3: #1f2731;
  --text: #d7dee8; --muted: #7d8a9c; --faint: #5b6675;
  --border: #232a34; --border-strong: #333d4a;
  --primary: #00d99b; --secondary: #38bdf8; --accent: #c084fc;
  --success: #22c55e; --warning: #eab308; --error: #f43f5e; --info: #38bdf8;
  --radius: 8px;
  --font: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --brand-grad: linear-gradient(135deg, #00d99b, #38bdf8);
  --accent-grad: linear-gradient(135deg, #c084fc, #38bdf8);
  --bg-fx: radial-gradient(800px 500px at 100% 0%, rgba(0,217,155,.08), transparent 55%);
  --glass: 0; --grid-line: rgba(215,222,232,.07);
  --glow: 0 0 0 1px rgba(0,217,155,.12), 0 0 28px rgba(0,217,155,.08);
  --elev-1: 0 1px 0 rgba(255,255,255,.03), 0 2px 8px rgba(0,0,0,.4);
  --elev-2: 0 1px 0 rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.5);
  --elev-3: 0 1px 0 rgba(255,255,255,.04), 0 22px 56px rgba(0,0,0,.65);
  --chart-1: #00d99b; --chart-2: #38bdf8; --chart-3: #c084fc; --chart-4: #eab308;
  --chart-5: #f43f5e; --chart-6: #22c55e; --chart-7: #fb923c; --chart-8: #94a3b8;
  --rail: #090c10; --rail-2: #18202b; --rail-line: rgba(255,255,255,.06);
  --rail-text: #e2e9f2; --rail-muted: rgba(190,202,218,.58); --rail-accent: #00d99b;
}

/* --- Dark AI Console -------------------------------------------------------- */
[data-theme="dark-console"] {
  --bg: #0b0e12; --surface: #12161c; --surface-2: #171c24; --surface-3: #1e242e;
  --text: #d7dee8; --muted: #7d8a9c; --faint: #5b6675;
  --border: #232a34; --border-strong: #333d4a;
  --primary: #00e5a8; --secondary: #38bdf8; --accent: #c084fc;
  --success: #22c55e; --warning: #eab308; --error: #f43f5e; --info: #38bdf8;
  --radius: 6px;
  --font: "JetBrains Mono", ui-monospace, "Cascadia Code", "Segoe UI", monospace;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --brand-grad: linear-gradient(135deg, #00e5a8, #38bdf8);
  --accent-grad: linear-gradient(135deg, #c084fc, #00e5a8);
  --bg-fx: radial-gradient(800px 500px at 100% 0%, rgba(0,229,168,.10), transparent 55%);
  --glass: 0; --grid-line: rgba(215,222,232,.08);
  --glow: 0 0 0 1px rgba(0,229,168,.14), 0 0 26px rgba(0,229,168,.10);
  --elev-1: 0 1px 0 rgba(255,255,255,.03), 0 2px 8px rgba(0,0,0,.4);
  --elev-2: 0 1px 0 rgba(255,255,255,.03), 0 10px 30px rgba(0,0,0,.5);
  --elev-3: 0 1px 0 rgba(255,255,255,.04), 0 22px 56px rgba(0,0,0,.65);
  --chart-1: #00e5a8; --chart-2: #38bdf8; --chart-3: #c084fc; --chart-4: #eab308;
  --chart-5: #f43f5e; --chart-6: #22c55e; --chart-7: #fb923c; --chart-8: #94a3b8;
  --rail: #080b0f; --rail-2: #16202a; --rail-line: rgba(255,255,255,.06);
  --rail-text: #dbe4ee; --rail-muted: rgba(196,209,224,.72); --rail-accent: #00e5a8;
}

/* --- AI Futurism ------------------------------------------------------------ */
[data-theme="ai-futurism"] {
  --bg: #070b18; --surface: #0e1730; --surface-2: #131e3c; --surface-3: #1a2950;
  --text: #e7eefc; --muted: #8aa0c8; --faint: #61789f;
  --border: #1e2c50; --border-strong: #2c4074;
  --primary: #6d5efc; --secondary: #22d3ee; --accent: #f472b6;
  --success: #34d399; --warning: #fbbf24; --error: #fb7185; --info: #22d3ee;
  --radius: 14px;
  --font: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --brand-grad: linear-gradient(135deg, #6d5efc, #22d3ee);
  --accent-grad: linear-gradient(135deg, #f472b6, #6d5efc);
  --bg-fx: radial-gradient(700px 500px at 80% 0%, rgba(109,94,252,.30), transparent 55%),
           radial-gradient(600px 500px at 10% 100%, rgba(34,211,238,.18), transparent 60%);
  --glass: 0; --grid-line: rgba(231,238,252,.07);
  --glow: 0 0 0 1px rgba(109,94,252,.18), 0 0 36px rgba(34,211,238,.14);
  --elev-1: 0 0 0 1px rgba(109,94,252,.10), 0 2px 10px rgba(0,0,0,.35);
  --elev-2: 0 0 0 1px rgba(109,94,252,.15), 0 12px 40px rgba(34,211,238,.10);
  --elev-3: 0 0 0 1px rgba(109,94,252,.22), 0 26px 64px rgba(34,211,238,.18);
  --chart-1: #6d5efc; --chart-2: #22d3ee; --chart-3: #f472b6; --chart-4: #fbbf24;
  --chart-5: #fb7185; --chart-6: #34d399; --chart-7: #818cf8; --chart-8: #a3e635;
  --rail: #060a16; --rail-2: #182653; --rail-line: rgba(255,255,255,.07);
  --rail-text: #eaf1ff; --rail-muted: rgba(196,212,244,.60); --rail-accent: #22d3ee;
}

/* --- Luxury Enterprise ------------------------------------------------------ */
[data-theme="luxury"] {
  --bg: #0f0f12; --surface: #17171d; --surface-2: #1d1d25; --surface-3: #24242e;
  --text: #efe9dd; --muted: #a89e8c; --faint: #7d7566;
  --border: #2a2a33; --border-strong: #3b3b47;
  --primary: #c9a227; --secondary: #b08d57; --accent: #e5c07b;
  --success: #7bbf6a; --warning: #d9a441; --error: #c75c5c; --info: #b08d57;
  --radius: 4px;
  --font: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --brand-grad: linear-gradient(135deg, #c9a227, #b08d57);
  --accent-grad: linear-gradient(135deg, #e5c07b, #c9a227);
  --bg-fx: radial-gradient(900px 600px at 50% -15%, rgba(201,162,39,.10), transparent 60%);
  --glass: 0; --grid-line: rgba(239,233,221,.07);
  --glow: 0 0 0 1px rgba(201,162,39,.14), 0 0 30px rgba(201,162,39,.08);
  --elev-1: 0 1px 0 rgba(201,162,39,.10), 0 2px 8px rgba(0,0,0,.35);
  --elev-2: 0 1px 0 rgba(201,162,39,.12), 0 16px 40px rgba(0,0,0,.45);
  --elev-3: 0 1px 0 rgba(201,162,39,.16), 0 28px 64px rgba(0,0,0,.60);
  --chart-1: #c9a227; --chart-2: #b08d57; --chart-3: #e5c07b; --chart-4: #7bbf6a;
  --chart-5: #c75c5c; --chart-6: #8ba7c4; --chart-7: #a78bfa; --chart-8: #6b7280;
  --rail: #0c0c0f; --rail-2: #2b2617; --rail-line: rgba(201,162,39,.12);
  --rail-text: #f3eee2; --rail-muted: rgba(214,204,186,.62); --rail-accent: #c9a227;
}

/* --- Cyberpunk AI ----------------------------------------------------------- */
[data-theme="cyberpunk"] {
  --bg: #07070d; --surface: #0e0e1a; --surface-2: #14142a; --surface-3: #1c1c3a;
  --text: #e8f7ff; --muted: #8ab0c8; --faint: #5f8098;
  --border: #25254a; --border-strong: #363670;
  --primary: #ff2bd1; --secondary: #00fff0; --accent: #faff00;
  --success: #39ff14; --warning: #ffb300; --error: #ff3860; --info: #00fff0;
  --radius: 2px;
  --font: "JetBrains Mono", ui-monospace, monospace;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --brand-grad: linear-gradient(135deg, #ff2bd1, #00fff0);
  --accent-grad: linear-gradient(135deg, #faff00, #ff2bd1);
  --bg-fx: radial-gradient(700px 600px at 85% -5%, rgba(255,43,209,.18), transparent 55%),
           radial-gradient(600px 600px at 5% 100%, rgba(0,255,240,.14), transparent 60%);
  --glass: 0; --grid-line: rgba(0,255,240,.10);
  --glow: 0 0 0 1px rgba(255,43,209,.30), 0 0 28px rgba(0,255,240,.20);
  --elev-1: 0 0 0 1px rgba(255,43,209,.20), 0 0 12px rgba(0,255,240,.10);
  --elev-2: 0 0 0 1px rgba(255,43,209,.30), 0 0 24px rgba(0,255,240,.18);
  --elev-3: 0 0 0 1px rgba(255,43,209,.40), 0 0 48px rgba(0,255,240,.28);
  --chart-1: #ff2bd1; --chart-2: #00fff0; --chart-3: #faff00; --chart-4: #39ff14;
  --chart-5: #ff3860; --chart-6: #7c4dff; --chart-7: #ffb300; --chart-8: #00b0ff;
  --rail: #05050b; --rail-2: #1a0f2e; --rail-line: rgba(0,255,240,.14);
  --rail-text: #eafcff; --rail-muted: rgba(160,200,220,.62); --rail-accent: #00fff0;
}

/* --- Carbon — neutral graphite, near-zero hue. For long working sessions. --- */
[data-theme="carbon"] {
  --bg: #131316; --surface: #1a1a1e; --surface-2: #212126; --surface-3: #2a2a31;
  --text: #e7e7ea; --muted: #9a9aa4; --faint: #6f6f7a;
  --border: #2d2d34; --border-strong: #3d3d46;
  --primary: #d4d4d8; --secondary: #60a5fa; --accent: #f59e0b;
  --success: #4ade80; --warning: #fbbf24; --error: #f87171; --info: #60a5fa;
  --radius: 8px;
  --font: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --brand-grad: linear-gradient(135deg, #e4e4e7, #a1a1aa);
  --accent-grad: linear-gradient(135deg, #f59e0b, #60a5fa);
  --bg-fx: none;
  --glass: 0; --grid-line: rgba(231,231,234,.07);
  --glow: 0 0 0 1px rgba(255,255,255,.05);
  --elev-1: 0 1px 2px rgba(0,0,0,.4);
  --elev-2: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.45);
  --elev-3: 0 2px 6px rgba(0,0,0,.5), 0 22px 56px rgba(0,0,0,.6);
  --chart-1: #a1a1aa; --chart-2: #60a5fa; --chart-3: #f59e0b; --chart-4: #4ade80;
  --chart-5: #f87171; --chart-6: #c084fc; --chart-7: #38bdf8; --chart-8: #fb923c;
  --rail: #0e0e11; --rail-2: #26262d; --rail-line: rgba(255,255,255,.06);
  --rail-text: #eaeaee; --rail-muted: rgba(200,200,210,.58); --rail-accent: #f59e0b;
}

/* --- Solar Flare — the wow theme, built for the solar-operations screens ---- */
[data-theme="solar-flare"] {
  --bg: #100a04; --surface: #1a120a; --surface-2: #241810; --surface-3: #2f2016;
  --text: #fdf3e3; --muted: #c0a486; --faint: #94795d;
  --border: #3a2718; --border-strong: #543a24;
  --primary: #f59e0b; --secondary: #fb923c; --accent: #38bdf8;
  --success: #4ade80; --warning: #fbbf24; --error: #fb7185; --info: #38bdf8;
  --radius: 10px;
  --font: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --brand-grad: linear-gradient(135deg, #f59e0b, #ef4444);
  --accent-grad: linear-gradient(135deg, #fbbf24, #38bdf8);
  --bg-fx: radial-gradient(900px 600px at 78% -12%, rgba(245,158,11,.24), transparent 56%),
           radial-gradient(700px 560px at 4% 104%, rgba(239,68,68,.14), transparent 60%);
  --glass: 0; --grid-line: rgba(253,243,227,.08);
  --glow: 0 0 0 1px rgba(245,158,11,.18), 0 0 34px rgba(245,158,11,.16);
  --elev-1: 0 1px 0 rgba(245,158,11,.10), 0 2px 8px rgba(0,0,0,.4);
  --elev-2: 0 0 0 1px rgba(245,158,11,.14), 0 14px 40px rgba(0,0,0,.5);
  --elev-3: 0 0 0 1px rgba(245,158,11,.22), 0 26px 62px rgba(0,0,0,.62);
  --chart-1: #f59e0b; --chart-2: #38bdf8; --chart-3: #fb923c; --chart-4: #4ade80;
  --chart-5: #fb7185; --chart-6: #a78bfa; --chart-7: #fcd34d; --chart-8: #2dd4bf;
  --rail: #0c0703; --rail-2: #2b1c0e; --rail-line: rgba(245,158,11,.14);
  --rail-text: #fdf6ea; --rail-muted: rgba(226,206,180,.62); --rail-accent: #f59e0b;
}

/* =============================================================================
   EXPRESSIVE GROUP
   ========================================================================== */

[data-theme="material"] {
  --bg: #f6f2fb; --surface: #ffffff; --surface-2: #f1ecf8; --surface-3: #e8e0f3;
  --text: #1c1b1f; --muted: #5d5b66; --faint: #918f9c;
  --border: #e7e0ee; --border-strong: #d0c6dd;
  --primary: #6750a4; --secondary: #625b71; --accent: #7d5260;
  --success: #2e7d32; --warning: #ed6c02; --error: #b3261e; --info: #6750a4;
  --radius: 16px;
  --font: "Roboto", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --brand-grad: linear-gradient(135deg, #6750a4, #7d5260);
  --accent-grad: linear-gradient(135deg, #7d5260, #6750a4);
  --bg-fx: radial-gradient(800px 500px at 0% 0%, rgba(103,80,164,.10), transparent 55%);
  --glass: 0; --grid-line: rgba(28,27,31,.07); --glow: none;
  --elev-1: 0 1px 2px rgba(0,0,0,.10);
  --elev-2: 0 1px 2px rgba(0,0,0,.10), 0 6px 16px rgba(103,80,164,.10);
  --elev-3: 0 4px 8px rgba(0,0,0,.12), 0 18px 40px rgba(103,80,164,.18);
  --chart-1: #6750a4; --chart-2: #7d5260; --chart-3: #625b71; --chart-4: #2e7d32;
  --chart-5: #b3261e; --chart-6: #ed6c02; --chart-7: #0288d1; --chart-8: #00897b;
  --rail: #21182f; --rail-2: #3c2f57; --rail-line: rgba(255,255,255,.09);
  --rail-text: #f7f2ff; --rail-muted: rgba(233,224,247,.66); --rail-accent: #d0bcff;
}

[data-theme="bento"] {
  --bg: #f3f4f7; --surface: #ffffff; --surface-2: #f6f7fa; --surface-3: #ecedf2;
  --text: #14161c; --muted: #5d6470; --faint: #949aa5;
  --border: #e6e8ee; --border-strong: #ced2dc;
  --primary: #111827; --secondary: #ff6b4a; --accent: #4f46e5;
  --success: #059669; --warning: #ea580c; --error: #e11d48; --info: #4f46e5;
  --radius: 20px;
  --font: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --brand-grad: linear-gradient(135deg, #111827, #ff6b4a);
  --accent-grad: linear-gradient(135deg, #ff6b4a, #4f46e5);
  --bg-fx: none;
  --glass: 0; --grid-line: rgba(20,22,28,.07); --glow: none;
  --elev-1: 0 2px 4px rgba(20,22,28,.04);
  --elev-2: 0 2px 4px rgba(20,22,28,.04), 0 12px 30px rgba(20,22,28,.08);
  --elev-3: 0 4px 8px rgba(20,22,28,.06), 0 24px 56px rgba(20,22,28,.14);
  --chart-1: #111827; --chart-2: #ff6b4a; --chart-3: #4f46e5; --chart-4: #059669;
  --chart-5: #e11d48; --chart-6: #ea580c; --chart-7: #0891b2; --chart-8: #a855f7;
  --rail: #111827; --rail-2: #26314a; --rail-line: rgba(255,255,255,.09);
  --rail-text: #f7f8fb; --rail-muted: rgba(229,232,240,.66); --rail-accent: #ff6b4a;
}

[data-theme="glassmorphism"] {
  --bg: #eaf0ff; --surface: rgba(255,255,255,.55); --surface-2: rgba(255,255,255,.35);
  --surface-3: rgba(255,255,255,.24);
  --text: #0f1b33; --muted: #4b5a72; --faint: #7c8aa3;
  --border: rgba(255,255,255,.6); --border-strong: rgba(255,255,255,.85);
  --primary: #7c3aed; --secondary: #2dd4bf; --accent: #f59e0b;
  --success: #10b981; --warning: #f59e0b; --error: #ef4444; --info: #7c3aed;
  --radius: 18px;
  --font: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --brand-grad: linear-gradient(135deg, #7c3aed, #2dd4bf);
  --accent-grad: linear-gradient(135deg, #f59e0b, #7c3aed);
  --bg-fx: linear-gradient(135deg, rgba(124,58,237,.22), rgba(45,212,191,.20));
  --glass: 1; --grid-line: rgba(15,27,51,.10); --glow: none;
  --elev-1: 0 4px 16px rgba(31,38,135,.10);
  --elev-2: 0 8px 32px rgba(31,38,135,.18);
  --elev-3: 0 16px 56px rgba(31,38,135,.28);
  --chart-1: #7c3aed; --chart-2: #2dd4bf; --chart-3: #f59e0b; --chart-4: #10b981;
  --chart-5: #ef4444; --chart-6: #3b82f6; --chart-7: #ec4899; --chart-8: #84cc16;
  /* .88, not .72. This is the only theme whose rail sits over a PALE page, so
     at .72 it composited to a mid-tone rgb(83,82,115) and the red nav icon
     fell to 2.7:1 against it — every other theme's rail is a dark ground.
     The frosted look comes from backdrop-filter, not from the alpha, so
     this costs nothing visually and restores the contrast. */
  --rail: rgba(24,20,60,.88); --rail-2: rgba(124,58,237,.52); --rail-line: rgba(255,255,255,.16);
  --rail-text: #ffffff; --rail-muted: rgba(255,255,255,.70); --rail-accent: #2dd4bf;
}

[data-theme="liquid-glass"] {
  --bg: #0a1124; --surface: rgba(255,255,255,.08); --surface-2: rgba(255,255,255,.05);
  --surface-3: rgba(255,255,255,.12);
  --text: #eaf2ff; --muted: #9fb2d6; --faint: #7086ad;
  --border: rgba(255,255,255,.14); --border-strong: rgba(255,255,255,.26);
  --primary: #38bdf8; --secondary: #a78bfa; --accent: #f0abfc;
  --success: #34d399; --warning: #fcd34d; --error: #fb7185; --info: #38bdf8;
  --radius: 22px;
  --font: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --brand-grad: linear-gradient(135deg, #38bdf8, #a78bfa);
  --accent-grad: linear-gradient(135deg, #f0abfc, #38bdf8);
  --bg-fx: radial-gradient(700px 600px at 90% 0%, rgba(56,189,248,.28), transparent 55%),
           radial-gradient(600px 600px at 0% 100%, rgba(167,139,250,.24), transparent 60%);
  --glass: 1; --grid-line: rgba(234,242,255,.10);
  --glow: 0 0 0 1px rgba(56,189,248,.16), 0 0 40px rgba(56,189,248,.14);
  --elev-1: 0 4px 20px rgba(56,189,248,.10);
  --elev-2: 0 8px 40px rgba(56,189,248,.16);
  --elev-3: 0 18px 64px rgba(56,189,248,.26);
  --chart-1: #38bdf8; --chart-2: #a78bfa; --chart-3: #f0abfc; --chart-4: #34d399;
  --chart-5: #fb7185; --chart-6: #fcd34d; --chart-7: #22d3ee; --chart-8: #818cf8;
  --rail: rgba(8,14,34,.78); --rail-2: rgba(56,189,248,.24); --rail-line: rgba(255,255,255,.12);
  --rail-text: #eaf2ff; --rail-muted: rgba(200,220,250,.64); --rail-accent: #a78bfa;
}

/* =============================================================================
   ON-TINT FOREGROUNDS

   Chips, banners and status text all put a status colour as TEXT on a light
   tint of that same colour. That is a legible, conventional pattern and it is
   also the one that quietly fails contrast: the tint lifts the background while
   the text stays put, so raw amber on a 17% amber tint measures 2.5:1 against
   the 4.5:1 that 11px text needs.

   Rather than hand-pick a second colour per status per theme -- 20 themes x 5
   statuses -- each foreground is the status colour pushed toward --text. That
   is theme-aware for free: --text is near-black on a light theme so the hue
   darkens, and near-white on a dark theme so it lightens. Both directions
   increase separation from the tint, and the colour still reads unmistakably
   as green, amber or red.

   The percentages differ because the hues are not equally luminous: amber needs
   the most help, red the least.

   Declared here rather than inside each theme block so there is exactly one
   place to change the policy. Custom properties substitute at use time, so
   var(--text) still resolves per theme.
   ========================================================================== */
:root,
[data-theme] {
  --on-ok:   color-mix(in srgb, var(--rag-green) 60%, var(--text));
  --on-warn: color-mix(in srgb, var(--rag-amber) 56%, var(--text));
  --on-err:  color-mix(in srgb, var(--rag-red)   72%, var(--text));
  --on-info: color-mix(in srgb, var(--rag-blue)  66%, var(--text));
  --on-pri:  color-mix(in srgb, var(--primary)   58%, var(--text));
  --on-acc:  color-mix(in srgb, var(--accent)    42%, var(--text));
  /* Links get the lightest touch of all: enough to clear 4.5:1 on the
     palettes where the raw brand blue lands at 4.4, while still reading
     unmistakably as the brand colour rather than as body text. */
  --on-link: color-mix(in srgb, var(--primary)   76%, var(--text));
}

/* Per-theme exceptions to the derivations above.
   `:root[data-theme=...]` rather than a bare attribute selector on purpose:
   the generic rule above is (0,1,0) and comes earlier, so an override needs
   (0,2,0) to win rather than relying on source order. */

/* Gold's primary is a mustard (#d69200). Yellow is the hardest hue to make
   legible as small text on white — even a heavy mix toward --text only reaches
   4.0:1, so the shared 76% derivation is not enough here. A deeper bronze
   clears 4.5:1 and still reads as the gold family, which is the point of the
   theme. Buttons and chrome keep the full-strength gold; it is only link TEXT
   that needs the help. */
:root[data-theme="gold"] {
  --on-link: color-mix(in srgb, var(--primary) 54%, var(--text));
}

/* =============================================================================
   NAV ICON COLOURS

   The rail icons carry a hue by meaning rather than being uniformly muted: red
   is risk, green is money, amber is energy, and so on. In a collapsed rail —
   where the labels are gone and only the icons remain — that colour is the
   only thing distinguishing one destination from another, so it is doing real
   work, not decoration.

   Two constraints shaped how these are derived:

   · They have to hold up across all twenty themes. Every theme's --rail is a
     dark surface (navy, near-black, bronze, deep violet), so each colour is
     mixed toward --rail-text. That lightens a dark source hue enough to be
     legible on the rail while keeping its identity, and leaves an
     already-bright one alone.

   · They have to stay inside the theme's own palette. Risk / money / energy
     come from the RAG tokens, which are fixed on purpose. The rest come from
     the theme's chart ramp, so a Cyberpunk rail is neon and a Luxury rail is
     bronze rather than every theme wearing the same eight crayons.

   Non-text UI graphics need 3:1 against their background; these are measured
   and all clear it, with the tightest around 4:1.
   ========================================================================== */
:root,
[data-theme] {
  --nav-risk:   color-mix(in srgb, var(--rag-red)   54%, var(--rail-text));
  --nav-money:  color-mix(in srgb, var(--rag-green) 54%, var(--rail-text));
  --nav-energy: color-mix(in srgb, var(--rag-amber) 60%, var(--rail-text));
  --nav-supply: color-mix(in srgb, var(--chart-6)   48%, var(--rail-text));
  --nav-legal:  color-mix(in srgb, var(--chart-4)   48%, var(--rail-text));
  --nav-eng:    color-mix(in srgb, var(--chart-3)   48%, var(--rail-text));
  --nav-people: color-mix(in srgb, var(--chart-8)   48%, var(--rail-text));
  --nav-core:   color-mix(in srgb, var(--chart-1)   48%, var(--rail-text));
}

/* =============================================================================
   THEME-SPECIFIC EFFECTS
   ========================================================================== */

/* Frosted surfaces where --glass is on. Applied to the panels, not the body:
   a blurred body blurs the text sitting on it. */
[data-theme="glassmorphism"] .card,
[data-theme="glassmorphism"] .topbar,
[data-theme="glassmorphism"] .launcher,
[data-theme="liquid-glass"] .card,
[data-theme="liquid-glass"] .topbar,
[data-theme="liquid-glass"] .launcher {
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* Cyberpunk scanlines, drawn on the ambient layer so no content sits under
   them at full strength. */
[data-theme="cyberpunk"] .bgfx::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,255,240,.05) 0 1px, transparent 1px 3px);
}

/* Solar Flare gets a slow heat shimmer — the one place a purely decorative
   animation earns its keep, because the theme exists to make the generation
   screens feel alive. Killed under reduced-motion. */
[data-theme="solar-flare"] .bgfx::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(520px 320px at 30% 12%, rgba(251,191,36,.10), transparent 70%);
  animation: mv-shimmer 9s ease-in-out infinite alternate;
}
@keyframes mv-shimmer {
  from { opacity: .45; transform: translateY(0); }
  to   { opacity: 1;   transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="solar-flare"] .bgfx::after { animation: none; }
}