/* Light theme (2026-10-27): white cards on a pale page, blue accent, dark ink. Loaded after style.css and only overrides it.
   Asked for: "look for this type of background colour" (a light, white-and-blue broker look). To go back to the dark theme remove the
   <link> to this file in index.html. Chart colours come from the --ch-* tokens below (read by drawCurve in app.js). */
:root {
  --bg: #f3f6fc;
  --bg-gradient: linear-gradient(180deg, #f7f9fe 0%, #eef2fa 100%);
  --panel: #ffffff;
  --panel2: #f6f8fd;
  --panel-elevated: #ffffff;
  --panel-hover: #eef3ff;
  --soft: #f3f6fc;
  --line: rgba(15, 23, 42, 0.10);
  --line-hover: rgba(35, 88, 214, 0.35);
  --line-accent: rgba(35, 88, 214, 0.45);

  --text: #0f172a;
  --text-secondary: #334155;
  --muted: #64748b;
  --text-dim: #7c8aa0;

  --accent: #2358d6;
  --accent-rgb: 35, 88, 214;
  --accent-d: rgba(35, 88, 214, 0.10);
  --accent-glow: none;
  --accent-gradient: linear-gradient(135deg, #1d4ec2 0%, #2f6bf0 100%);

  --good: #16a34a;  --good-rgb: 22, 163, 74;  --good-d: rgba(22, 163, 74, 0.12);  --good-glow: none;
  --bad: #dc2626;   --bad-rgb: 220, 38, 38;   --bad-d: rgba(220, 38, 38, 0.10);   --bad-glow: none;
  --warn: #b45309;  --warn-d: rgba(245, 158, 11, 0.16); --warn-glow: none;

  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-card: 0 2px 10px rgba(15, 23, 42, 0.07), 0 0 0 1px var(--line);
  --shadow-card-hover: 0 6px 20px rgba(35, 88, 214, 0.14), 0 0 0 1px var(--line-hover);

  --ch-ink: #64748b; --ch-title: #7c8aa0; --ch-grid: rgba(15, 23, 42, 0.08); --ch-zero: rgba(15, 23, 42, 0.35);
  --ch-band: rgba(15, 23, 42, 0.03); --ch-dot: #ffffff; --ch-dot-hot: #0f172a; --ch-cross: rgba(15, 23, 42, 0.30); --ch-axis: rgba(15, 23, 42, 0.22);
  --ch-up: #2358d6; --ch-down: #dc2626; --ch-up-ink: #15803d; --ch-down-ink: #b91c1c;
}
body::before { display: none; }
::-webkit-scrollbar-track { background: #eef2fa; }
::-webkit-scrollbar-thumb { background: #c3cde0; }
::-webkit-scrollbar-thumb:hover { background: #a7b4cf; }

/* sidebar + header */
.sidebar { background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; border-right: 1px solid var(--line); }
.tab { color: var(--text-secondary); }
.tab:hover { background: #eef3ff; color: var(--accent); }
.tab.active { background: #e3ecff; color: var(--accent); box-shadow: none; border-color: transparent; }
.brand-title, .brand-title * { color: var(--text); }
.sim-badge, .sim { color: #92400e; }
button.primary, .btn-primary { color: #fff; }

/* text that was pale-on-dark */
.panel, .tile, .tcard { color: var(--text); }
h1, h2, h3, .ctl-title, .bsym b, .bpx b, .callrow .csym b, .svc .h .nm, .ol-stats b { color: var(--text); }
.mchip { background: rgba(15, 23, 42, 0.06); }
.mchip.good { background: var(--good-d); color: #15803d; }
.mchip.bad { background: var(--bad-d); color: #b91c1c; }
.mchip.live { background: var(--accent-d); color: var(--accent); }
.tr-tgrid .tile { border-left-color: rgba(15, 23, 42, 0.14); }
.tr-group { background: rgba(255, 255, 255, 0.65); }
.tr-hero-main { background: #fff; }
.tr-hero-main.up { background: linear-gradient(135deg, rgba(22,163,74,0.14) 0%, #fff 75%); border-color: rgba(22,163,74,0.35); }
.tr-hero-main.down { background: linear-gradient(135deg, rgba(220,38,38,0.12) 0%, #fff 75%); border-color: rgba(220,38,38,0.32); }
.tr-stat, .chart-panel, .ctl-card { background: #fff; }
.ctl-tag { color: #92400e; }
#tr-curve { background: linear-gradient(180deg, #fbfcff 0%, #f3f6fc 100%); }
.chart-tooltip { background: #fff; color: var(--text); border-color: var(--line); box-shadow: var(--shadow-card); }
input, select, textarea { background: #fff; color: var(--text); border-color: rgba(15, 23, 42, 0.18); }
input::placeholder { color: #94a3b8; }
table th { color: var(--muted); }

/* pale-on-dark text remapped for the light theme (generated from style.css colour rules) */
.brand-title { color: #0f172a; }
.sim-badge { color: #92400e; }
.tab.active { color: #2358d6; }
.logout { color: #dc2626; }
.bc-title { color: #0f172a; }
.status-pill { color: #15803d; }
h1 { color: #0f172a; }
h2 { color: #334155; }
h3 { color: #334155; }
.error { color: #b91c1c; }
.summary b { color: #0f172a; }
.sect-t { color: #0f172a; }
.card .v { color: #0f172a; }
td.sym { color: #0f172a; }
td.sym a.kc { color: #0f172a; }
.badge.buy { color: #15803d; }
.badge.sell { color: #b91c1c; }
.chip.bull, .chip.good, .chip.ok { color: #15803d; }
.chip.bear, .chip.bad { color: #b91c1c; }
.chip.warn { color: #92400e; }
.chip.info { color: #0369a1; }
.th .s { color: #0f172a; }
.trow .top .l .s { color: #0f172a; }
.lv.thit { color: #15803d; }
.lv.thit i { color: #15803d; }
.lv.slhit { color: #b91c1c; }
.lv.slhit i { color: #b91c1c; }
.lv.slmoved { color: #92400e; }
.ol-stats b { color: #0f172a; }
.ol-warn { color: #92400e; }
.btn-bull { color: #15803d; }
.btn-bear { color: #b91c1c; }
.or-mbuy { color: #15803d; }
.or-msell { color: #b91c1c; }
.sidectl button.buy:not(.on) { color: #15803d; }
.sidectl button.sell:not(.on) { color: #b91c1c; }
.bsym b { color: #0f172a; }
.bpx b { color: #0f172a; }
.gnow span { color: #0369a1; }
.callrow .csym b { color: #0f172a; }
.svc .h .nm { color: #0f172a; }
.rec.rec-buy { color: #15803d; }
.rec.rec-sell { color: #b91c1c; }
.rec.rec-wait { color: #92400e; }
.grade.gA { color: #15803d; }
.grade.gB { color: #92400e; }
.inzone { color: #15803d; }
.rngtag { color: #92400e; }
.dchip.R { color: #334155; }
.dchip.D { color: #b91c1c; }
.dchip.U { color: #15803d; }
.pf-both { color: #15803d; }
.auth-t { color: #0f172a; }
.pause-banner { color: #b91c1c; }
.mchip.good { color: #15803d; }
.mchip.bad { color: #b91c1c; }
.pause-state { color: #15803d; }
.pause-state.on { color: #b91c1c; }

/* dark leftovers found on the Performance / Price Action Lab pages */
th { background: #eef2fa; color: var(--muted); }
.dchip { color: #334155; }
.dchip.R { background: #eef2fa; color: #475569; border-color: rgba(15, 23, 42, 0.12); }
.dchip.D { background: var(--bad-d); color: #b91c1c; border-color: rgba(220, 38, 38, 0.30); }
.dchip.U { background: var(--good-d); color: #15803d; border-color: rgba(22, 163, 74, 0.30); }
input:focus, select:focus, textarea:focus { background: #fff; box-shadow: 0 0 0 3px rgba(35, 88, 214, 0.15); }
[style*="#0d1117"], .tip, .tooltip { background-color: #fff; color: var(--text); }
.ol-chart svg { background: #fbfcff; }
.sw { background: #cbd5e1; }
.gnow span { background: #e3ecff; color: #1d4ec2; border-color: rgba(35, 88, 214, 0.4); }