/* HumanX Lab — colour themes, readability layer and text-size scale.
   Loaded LAST on every page. Every theme defines the same tokens, so all three pages (Command Center, Workbench, Performance)
   re-colour together. Profit stays "green" and loss stays "red" in every theme EXCEPT "Colour-blind safe" (blue = up, orange = down).

   Readability rules applied to every theme (see research/README: WCAG 2.2 / dashboard guidance):
   - body text >= 12:1, secondary text >= 8:1, muted text >= 5.5:1 against the panel it sits on (WCAG AA is 4.5:1),
   - panels are OPAQUE and nothing uses backdrop-filter: Chrome drops sub-pixel text antialiasing on blurred/translucent layers,
     which is what made small text look blurry,
   - no text smaller than 12px (the old 9-11px labels were bumped), body text 14px. */

:root {
  /* ---- Midnight (default) ---- */
  --bg-0: #040a16; --bg-1: #07122a;
  --panel: #0b172e; --panel-solid: #0b172e; --panel-2: #13244a;
  --line: rgba(120, 160, 255, 0.18); --line-2: rgba(120, 160, 255, 0.34);
  --text: #eaf1ff; --text-strong: #ffffff; --text-2: #b9c8e4; --muted: #92a6c8;
  --cyan: #2fd9f2; --blue: #6aa2ff; --violet: #a28bff;
  --green: #25e8a6; --red: #ff6f8a; --amber: #ffbe55;
  --green-bg: rgba(37, 232, 166, 0.14); --red-bg: rgba(255, 111, 138, 0.14); --amber-bg: rgba(255, 190, 85, 0.15);
  --blue-bg: rgba(106, 162, 255, 0.17); --violet-bg: rgba(162, 139, 255, 0.17);
  --glow-1: rgba(79, 140, 255, 0.16); --glow-2: rgba(139, 108, 255, 0.12); --glow-3: rgba(34, 211, 238, 0.06);
  --on-accent: #ffffff; --on-red: #1d0712; --shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  --ui-scale: 1;
  color-scheme: dark;
}

/* ---- Aurora (teal) ---- */
:root[data-theme="aurora"] {
  --bg-0: #021311; --bg-1: #05241f; --panel: #072620; --panel-solid: #072620; --panel-2: #0e3a32;
  --line: rgba(90, 235, 205, 0.18); --line-2: rgba(90, 235, 205, 0.34);
  --text: #e6fbf6; --text-strong: #ffffff; --text-2: #b6dcd4; --muted: #8cb9af;
  --cyan: #5eead4; --blue: #2dd4bf; --violet: #4cc3f7;
  --green: #34ecb0; --red: #ff7a8e; --amber: #ffcf5c;
  --green-bg: rgba(52, 236, 176, 0.14); --red-bg: rgba(255, 122, 142, 0.14); --amber-bg: rgba(255, 207, 92, 0.15);
  --blue-bg: rgba(45, 212, 191, 0.17); --violet-bg: rgba(76, 195, 247, 0.16);
  --glow-1: rgba(45, 212, 191, 0.17); --glow-2: rgba(56, 189, 248, 0.11); --glow-3: rgba(250, 204, 21, 0.05);
  --on-accent: #02211c;
}
/* ---- Royal (violet) ---- */
:root[data-theme="royal"] {
  --bg-0: #0a0616; --bg-1: #170c33; --panel: #1a0f38; --panel-solid: #1a0f38; --panel-2: #2b1a58;
  --line: rgba(180, 145, 255, 0.2); --line-2: rgba(180, 145, 255, 0.36);
  --text: #f1ebff; --text-strong: #ffffff; --text-2: #cdc1ea; --muted: #a79bcf;
  --cyan: #86dcff; --blue: #a688ff; --violet: #dc86ff;
  --green: #3ae9ae; --red: #ff7b95; --amber: #ffc861;
  --green-bg: rgba(58, 233, 174, 0.14); --red-bg: rgba(255, 123, 149, 0.14); --amber-bg: rgba(255, 200, 97, 0.15);
  --blue-bg: rgba(166, 136, 255, 0.18); --violet-bg: rgba(220, 134, 255, 0.17);
  --glow-1: rgba(155, 123, 255, 0.2); --glow-2: rgba(247, 192, 74, 0.09); --glow-3: rgba(209, 123, 255, 0.08);
}
/* ---- Ember (orange) ---- */
:root[data-theme="ember"] {
  --bg-0: #120806; --bg-1: #241209; --panel: #2a150c; --panel-solid: #2a150c; --panel-2: #432216;
  --line: rgba(255, 175, 110, 0.2); --line-2: rgba(255, 175, 110, 0.36);
  --text: #fff2e8; --text-strong: #ffffff; --text-2: #e6cdbb; --muted: #c0a08a;
  --cyan: #ffd978; --blue: #ffa552; --violet: #ff7a90;
  --green: #4cd98c; --red: #ff7d86; --amber: #ffd166;
  --green-bg: rgba(76, 217, 140, 0.14); --red-bg: rgba(255, 125, 134, 0.15); --amber-bg: rgba(255, 209, 102, 0.15);
  --blue-bg: rgba(255, 165, 82, 0.17); --violet-bg: rgba(255, 122, 144, 0.16);
  --glow-1: rgba(255, 159, 67, 0.17); --glow-2: rgba(255, 107, 129, 0.1); --glow-3: rgba(247, 192, 74, 0.07);
  --on-accent: #2a1200;
}
/* ---- Graphite (neutral grey, easiest on the eyes) ---- */
:root[data-theme="graphite"] {
  --bg-0: #0d0e11; --bg-1: #14161a; --panel: #1a1d22; --panel-solid: #1a1d22; --panel-2: #262a32;
  --line: rgba(255, 255, 255, 0.12); --line-2: rgba(255, 255, 255, 0.24);
  --text: #eceef2; --text-strong: #ffffff; --text-2: #c3c9d4; --muted: #9ba4b5;
  --cyan: #62d3ea; --blue: #78aeff; --violet: #b196fb;
  --green: #3de6a8; --red: #ff7b8e; --amber: #ffc45e;
  --green-bg: rgba(61, 230, 168, 0.13); --red-bg: rgba(255, 123, 142, 0.14); --amber-bg: rgba(255, 196, 94, 0.14);
  --blue-bg: rgba(120, 174, 255, 0.16); --violet-bg: rgba(177, 150, 251, 0.16);
  --glow-1: rgba(120, 174, 255, 0.06); --glow-2: rgba(177, 150, 251, 0.04); --glow-3: rgba(98, 211, 234, 0.03);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
/* ---- Terminal (black + green, classic trading screen) ---- */
:root[data-theme="terminal"] {
  --bg-0: #020a06; --bg-1: #04140c; --panel: #061a10; --panel-solid: #061a10; --panel-2: #0c2c1b;
  --line: rgba(70, 255, 160, 0.17); --line-2: rgba(70, 255, 160, 0.32);
  --text: #dcfce7; --text-strong: #ffffff; --text-2: #aee6c4; --muted: #86bd9d;
  --cyan: #5df0c4; --blue: #3fe08f; --violet: #b6f04a;
  --green: #4df29a; --red: #ff7a8a; --amber: #ffd166;
  --green-bg: rgba(77, 242, 154, 0.14); --red-bg: rgba(255, 122, 138, 0.14); --amber-bg: rgba(255, 209, 102, 0.15);
  --blue-bg: rgba(63, 224, 143, 0.16); --violet-bg: rgba(182, 240, 74, 0.14);
  --glow-1: rgba(63, 224, 143, 0.13); --glow-2: rgba(182, 240, 74, 0.06); --glow-3: rgba(93, 240, 196, 0.05);
  --on-accent: #02150b;
}
/* ---- High contrast (largest text/background gap, stronger borders) ---- */
:root[data-theme="contrast"] {
  --bg-0: #05070b; --bg-1: #080c14; --panel: #0d121c; --panel-solid: #0d121c; --panel-2: #18202f;
  --line: rgba(255, 255, 255, 0.34); --line-2: rgba(255, 255, 255, 0.55);
  --text: #ffffff; --text-strong: #ffffff; --text-2: #e4eaf5; --muted: #bcc7dc;
  --cyan: #6be6ff; --blue: #8cbcff; --violet: #c3acff;
  --green: #45f5b4; --red: #ff8196; --amber: #ffd466;
  --green-bg: rgba(69, 245, 180, 0.18); --red-bg: rgba(255, 129, 150, 0.18); --amber-bg: rgba(255, 212, 102, 0.18);
  --blue-bg: rgba(140, 188, 255, 0.2); --violet-bg: rgba(195, 172, 255, 0.2);
  --glow-1: rgba(0, 0, 0, 0); --glow-2: rgba(0, 0, 0, 0); --glow-3: rgba(0, 0, 0, 0);
}
/* ---- Colour-blind safe: BLUE = up/profit, ORANGE = down/loss (red/green are hard to tell apart for ~8% of men) ---- */
:root[data-theme="colorblind"] {
  --bg-0: #040a16; --bg-1: #07122a; --panel: #0b172e; --panel-solid: #0b172e; --panel-2: #13244a;
  --text: #eaf1ff; --text-2: #b9c8e4; --muted: #92a6c8;
  --green: #4aa8ff; --red: #ff9a2e; --amber: #f2e45a;
  --green-bg: rgba(74, 168, 255, 0.17); --red-bg: rgba(255, 154, 46, 0.17); --amber-bg: rgba(242, 228, 90, 0.15);
  --cyan: #38d6c4; --blue: #7fb0ff; --violet: #b49bff;
  --blue-bg: rgba(127, 176, 255, 0.17); --violet-bg: rgba(180, 155, 255, 0.17);
}
/* ---- Daylight (light) ---- */
:root[data-theme="daylight"] {
  --bg-0: #e9eef6; --bg-1: #f4f7fb; --panel: #ffffff; --panel-solid: #ffffff; --panel-2: #eef2f9;
  --line: rgba(20, 40, 90, 0.16); --line-2: rgba(20, 40, 90, 0.3);
  --text: #0e1a33; --text-strong: #060d1f; --text-2: #34466b; --muted: #55698f;
  --cyan: #007b9a; --blue: #1855c4; --violet: #6540d1;
  --green: #067a52; --red: #c21f3d; --amber: #9a5700;
  --green-bg: rgba(6, 122, 82, 0.11); --red-bg: rgba(194, 31, 61, 0.1); --amber-bg: rgba(154, 87, 0, 0.12);
  --blue-bg: rgba(28, 95, 214, 0.1); --violet-bg: rgba(101, 64, 209, 0.1);
  --glow-1: rgba(28, 95, 214, 0.07); --glow-2: rgba(101, 64, 209, 0.05); --glow-3: rgba(0, 123, 154, 0.04); --on-red: #ffffff;
  --shadow: 0 6px 20px rgba(20, 40, 90, 0.1);
  color-scheme: light;
}

/* ---- aliases: the older pages (Workbench, Performance) use a second set of names ---- */
:root {
  --bg: var(--bg-0); --bg2: var(--bg-1); --bg3: var(--panel-solid); --panel2: var(--panel-2);
  --border: var(--line); --border-hover: var(--line-2); --text-secondary: var(--text-2);
  --yellow: var(--amber); --purple: var(--violet); --blue-soft: var(--blue-bg);
}

/* ---- one body background driven by the tokens ---- */
body {
  background:
    radial-gradient(1200px 600px at 12% -10%, var(--glow-1), transparent 60%),
    radial-gradient(900px 520px at 100% 0%, var(--glow-2), transparent 55%),
    radial-gradient(800px 500px at 50% 110%, var(--glow-3), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
  background-attachment: fixed;
  color: var(--text);
  font-size: 14px;
  text-rendering: optimizeLegibility;
  zoom: var(--ui-scale);
}
:root[data-theme="contrast"] body { font-weight: 500; }

/* ---- readability: crisp text (no blurred/translucent layers) ---- */
*, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.card, .panel, .ai-engine, .metric, .asset-card, .stat, .chip, .badge { background-color: var(--panel); box-shadow: var(--shadow); }
.chip, .badge, .stat, .metric { box-shadow: none; }
.topbar { background: var(--panel-solid) !important; }
.sidebar { background: var(--bg-1) !important; }
.overlay { background: rgba(2, 6, 16, 0.72); }
/* secondary text must stay readable wherever the old pages hard-coded their own greys */
.dim, .muted, small { color: var(--muted); }
th { color: var(--muted); }
.k, .label { letter-spacing: 0.06em; }
/* the page is scaled by --ui-scale (Text size option): keep full-height elements the size of the window */
.sidebar { height: calc(100vh / var(--ui-scale)); }
.shell { min-height: calc(100vh / var(--ui-scale)); }

/* ---- theme picker ---- */
.hx-theme-btn { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text-2); cursor: pointer; font-size: 16px; }
.hx-theme-btn:hover { color: var(--text-strong); border-color: var(--blue); }
.hx-theme-btn svg { width: 18px; height: 18px; }
.hx-theme-float { position: fixed; left: 14px; bottom: 14px; z-index: 90; }
.hx-theme-menu { position: fixed; z-index: 95; display: none; width: 296px; padding: 14px; border-radius: 16px; background: var(--panel-solid); border: 1px solid var(--line-2); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); color: var(--text); font-size: 13px; }
.hx-theme-menu.open { display: block; }
.hx-theme-menu h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.hx-theme-menu h4:not(:first-child) { margin-top: 14px; }
.hx-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hx-sw { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 4px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text-2); cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.hx-sw:hover { border-color: var(--line-2); color: var(--text-strong); }
.hx-sw.active { border-color: var(--blue); color: var(--text-strong); box-shadow: 0 0 0 1px var(--blue); }
.hx-sw i { display: block; width: 44px; height: 26px; border-radius: 8px; border: 1px solid rgba(128, 128, 128, 0.35); }
.hx-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hx-size { padding: 8px 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text-2); cursor: pointer; font: inherit; font-weight: 700; }
.hx-size:hover { color: var(--text-strong); border-color: var(--line-2); }
.hx-size.active { border-color: var(--blue); color: var(--text-strong); box-shadow: 0 0 0 1px var(--blue); }
.hx-theme-note { margin-top: 12px; font-size: 12px; color: var(--muted); line-height: 1.45; }

/* ---- Daylight: places where the dark design used white-on-translucent ---- */
:root[data-theme="daylight"] .sidebar { border-right-color: var(--line-2); }
:root[data-theme="daylight"] .nav-item.active, :root[data-theme="daylight"] .seg button.active, :root[data-theme="daylight"] .tf button.active { background: var(--blue-bg); color: var(--blue); box-shadow: inset 0 0 0 1px var(--line-2); }
:root[data-theme="daylight"] .skeleton { background: linear-gradient(90deg, #e3e9f3, #f1f4fa, #e3e9f3); }
:root[data-theme="daylight"] .overlay { background: rgba(230, 236, 246, 0.8); }
:root[data-theme="daylight"] .hx-theme-menu { box-shadow: 0 24px 60px rgba(20, 40, 90, 0.25); }

/* ---- status badges (Performance / Workbench): tinted from the theme's semantic colours instead of fixed dark fills ---- */
.badge.green { background: var(--green-bg); border-color: color-mix(in srgb, var(--green) 50%, transparent); color: var(--green); }
.badge.yellow { background: var(--amber-bg); border-color: color-mix(in srgb, var(--amber) 50%, transparent); color: var(--amber); }
.badge.hot { background: var(--amber-bg); border-color: color-mix(in srgb, var(--amber) 70%, transparent); color: var(--amber); box-shadow: none; }
.badge.blue { background: var(--blue-bg); border-color: color-mix(in srgb, var(--blue) 50%, transparent); color: var(--blue); }
.badge.red { background: var(--red-bg); border-color: color-mix(in srgb, var(--red) 50%, transparent); color: var(--red); }
.badge.grey { background: var(--panel-2); border-color: var(--line-2); color: var(--muted); }
.green { color: var(--green); } .red { color: var(--red); }