/* Shared theme for every page (index, combine, lessons).
   Layer 1 = raw palette (--p-*): only defined here.
   Layer 2 = semantic tokens (--bg, --accent, --up…): the only names pages may use.
   Mode: <html data-theme="light|dark"> or none = follow system. Palette: <html data-palette="…"> or none = classic.
   Every colour is light-dark(LIGHT, DARK), so one line covers both modes. */

:root{color-scheme:light dark}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

/* ---------- layer 1: raw palette ---------- */
:root{
  --p-blue:   light-dark(#2f5bea, #6f8dff);
  --p-sky:    light-dark(#0ea5e9, #38bdf8);
  --p-teal:   light-dark(#0f7f7a, #3fc1b9);
  --p-cyan:   light-dark(#0e7490, #22d3ee);
  --p-violet: light-dark(#5b4bd6, #9d8cff);
  --p-pink:   light-dark(#c0306b, #ff7eb0);
  --p-amber:  light-dark(#b26b00, #f2b705);
  --p-orange: light-dark(#c2560f, #ff9b54);
  --p-green:  light-dark(#2e6b3f, #4fb873);
  --p-red:    light-dark(#9a2c25, #e2665e);
  --p-slate:  light-dark(#667085, #9aa3b2);
}

/* ---------- layer 2: semantic tokens (classic palette) ---------- */
:root{
  --bg:        light-dark(#f5f6f8, #0e1014);
  --surface:   light-dark(#ffffff, #161920);
  --surface-2: light-dark(#f0f2f5, #1d2129);
  --border:    light-dark(#e2e5ea, #2a2f39);
  --text:      light-dark(#15171c, #e8eaef);
  --muted:     var(--p-slate);
  --chip:      light-dark(#eef0f4, #232833);
  --grid:      light-dark(#eef0f3, #20242c);
  --bb:        light-dark(#98a2b3, #5d6675);

  --accent:    var(--p-blue);
  --accent-2:  var(--p-violet);
  --on-accent: #fff;

  /* trading meaning: keep stable across palettes */
  --up:   var(--p-green);
  --down: var(--p-red);
  --warn: var(--p-amber);
  --highlight: light-dark(#b7791f, #f2c14e);   /* "best pick" gold */

  /* market-cycle phases */
  --ph-acc:  var(--p-sky);
  --ph-up:   light-dark(#2e8b4a, #4fb873);
  --ph-dist: light-dark(#d08a1e, #e6a83c);
  --ph-down: light-dark(#c0392b, #e2665e);

  /* categorical chart series */
  --chart-1: var(--accent);
  --chart-2: var(--p-amber);
  --chart-3: var(--p-teal);
  --chart-4: var(--p-pink);
  --chart-5: var(--p-violet);
  --chart-6: var(--p-orange);

  /* derived: never hard-code tints, mix them */
  --accent-soft: color-mix(in oklch, var(--accent) 15%, transparent);
  --up-soft:     color-mix(in oklch, var(--up) 15%, transparent);
  --down-soft:   color-mix(in oklch, var(--down) 15%, transparent);
  --warn-soft:   color-mix(in oklch, var(--warn) 16%, transparent);
  --up-a:        color-mix(in srgb, var(--up) 35%, transparent);
  --down-a:      color-mix(in srgb, var(--down) 35%, transparent);
  --accent-grad: linear-gradient(135deg, var(--accent), var(--accent-2));
}

/* ---------- alternative palettes: re-point layer 2 only ---------- */
:root[data-palette="ocean"]{
  --bg:        light-dark(#eef4f5, #0b1214);
  --surface:   light-dark(#ffffff, #121b1e);
  --surface-2: light-dark(#e6f0f1, #182427);
  --border:    light-dark(#d3e2e4, #24353a);
  --chip:      light-dark(#e3eef0, #1c2b2f);
  --grid:      light-dark(#e6eff0, #172225);
  --accent:    var(--p-teal);
  --accent-2:  var(--p-cyan);
  --chart-2:   var(--p-blue);
}
:root[data-palette="sunset"]{
  --bg:        light-dark(#f7f4f8, #110e15);
  --surface:   light-dark(#ffffff, #1a1620);
  --surface-2: light-dark(#f1ecf4, #221d29);
  --border:    light-dark(#e5dcea, #332b3c);
  --chip:      light-dark(#efe8f3, #29222f);
  --grid:      light-dark(#f0eaf3, #201b26);
  --accent:    var(--p-violet);
  --accent-2:  var(--p-pink);
  --chart-3:   var(--p-orange);
}