/* DESIGN.md §2 -- the single source of truth for theme tokens.
 *
 * Light values are the production palette. Dark values are the canonical
 * dark-mode mapping (preserves brand identity + AA contrast). Never declare
 * color literals outside this file.
 *
 * The :root[data-theme="..."] hooks below let theme.js force a theme via
 * localStorage; they mirror the light/dark blocks above. The cascade order
 * is: :root (light defaults) -> @media (auto dark) -> :root[data-theme]
 * (manual override wins).
 */

:root {
  /* surfaces */
  --surface-page:          #F5FBFF;
  --surface-card-white:    #FFFFFF;
  --surface-card-blue:     #EBF5FB;
  --surface-elevated:      #FFFFFF;
  --surface-overlay-hover: rgba(0, 0, 0, 0.04);
  --surface-toggle-track:  rgba(15, 25, 45, 0.07);
  --surface-scrim:         rgba(245, 251, 255, 0.62);
  --shadow-toggle-pill:    0 2px 4px rgba(15, 23, 42, 0.10), 0 1px 2px rgba(15, 23, 42, 0.07);

  /* text + dividers */
  --text-primary:   rgba(0, 0, 0, 0.87);
  --text-secondary: rgba(0, 0, 0, 0.60);
  --text-disabled:  rgba(0, 0, 0, 0.38);
  --divider:        rgba(0, 0, 0, 0.12);
  --chart-grid:     rgba(0, 0, 0, 0.06);

  /* brand */
  --brand-primary:    #3586FF;
  --brand-ink:        #11192D;
  --brand-on-primary: #FFFFFF;
  --brand-muted-bg:   #1E242C;
  --brand-muted-fg:   #FFFFFF;
  --info-accent:      #96BFFC;

  /* state */
  --state-up:        #4BC0C0;
  --state-down:      #FF6384;
  --state-up-soft:   rgba(75, 192, 192, 0.5);
  --state-down-soft: rgba(255, 99, 132, 0.5);
  --state-neutral:   #BEBEBE;

  /* Orderbook depth-bar fill: quieter 0.25 alpha so the cumulative-size fill
   * sits behind the row text. Decoupled from --state-*-soft (0.5) which
   * drives chart bodies / depth-chart gradient / spikes widget. */
  --ob-bar-up:       rgba(75, 192, 192, 0.25);
  --ob-bar-down:     rgba(255, 99, 132, 0.25);

  /* quality verdict cards */
  --quality-high:   #15a36e;
  --quality-medium: #d99100;
  --quality-low:    #e0455e;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-page:          #0B1322;
    --surface-card-white:    #141D32;
    --surface-card-blue:     #1A2540;
    --surface-elevated:      #1B2540;
    --surface-overlay-hover: rgba(255, 255, 255, 0.06);
    --surface-toggle-track:  rgba(255, 255, 255, 0.10);
    --surface-scrim:         rgba(11, 19, 34, 0.62);
    --shadow-toggle-pill:    0 2px 4px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);

    --text-primary:   rgba(255, 255, 255, 0.92);
    --text-secondary: rgba(255, 255, 255, 0.66);
    --text-disabled:  rgba(255, 255, 255, 0.42);
    --divider:        rgba(255, 255, 255, 0.14);
    --chart-grid:     rgba(255, 255, 255, 0.08);

    --brand-ink: #FFFFFF; /* the "dark" series flips to light */

    --state-up:        #4BC0C0;
    --state-down:      #FF6384;
    --state-up-soft:   rgba(75, 192, 192, 0.5);
    --state-down-soft: rgba(255, 99, 132, 0.5);
    --state-neutral:   #7C8699;

    --ob-bar-up:       rgba(75, 192, 192, 0.25);
    --ob-bar-down:     rgba(255, 99, 132, 0.25);

    /* quality verdict cards */
    --quality-high:   #34d399;
    --quality-medium: #fbbf24;
    --quality-low:    #fb7185;

    color-scheme: dark;
  }
}

/* Manual override hooks -- forced via theme.js + localStorage. */

:root[data-theme="light"] {
  --surface-page:          #F5FBFF;
  --surface-card-white:    #FFFFFF;
  --surface-card-blue:     #EBF5FB;
  --surface-elevated:      #FFFFFF;
  --surface-overlay-hover: rgba(0, 0, 0, 0.04);
  --surface-toggle-track:  rgba(15, 25, 45, 0.07);
  --surface-scrim:         rgba(245, 251, 255, 0.62);
  --shadow-toggle-pill:    0 2px 4px rgba(15, 23, 42, 0.10), 0 1px 2px rgba(15, 23, 42, 0.07);

  --text-primary:   rgba(0, 0, 0, 0.87);
  --text-secondary: rgba(0, 0, 0, 0.60);
  --text-disabled:  rgba(0, 0, 0, 0.38);
  --divider:        rgba(0, 0, 0, 0.12);
  --chart-grid:     rgba(0, 0, 0, 0.06);

  --brand-primary:    #3586FF;
  --brand-ink:        #11192D;
  --brand-on-primary: #FFFFFF;
  --brand-muted-bg:   #1E242C;
  --brand-muted-fg:   #FFFFFF;
  --info-accent:      #96BFFC;

  --state-up:        #4BC0C0;
  --state-down:      #FF6384;
  --state-up-soft:   rgba(75, 192, 192, 0.5);
  --state-down-soft: rgba(255, 99, 132, 0.5);
  --state-neutral:   #BEBEBE;

  --ob-bar-up:       rgba(75, 192, 192, 0.25);
  --ob-bar-down:     rgba(255, 99, 132, 0.25);

  /* quality verdict cards */
  --quality-high:   #15a36e;
  --quality-medium: #d99100;
  --quality-low:    #e0455e;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --surface-page:          #0B1322;
  --surface-card-white:    #141D32;
  --surface-card-blue:     #1A2540;
  --surface-elevated:      #1B2540;
  --surface-overlay-hover: rgba(255, 255, 255, 0.06);
  --surface-toggle-track:  rgba(255, 255, 255, 0.10);
  --surface-scrim:         rgba(11, 19, 34, 0.62);
  --shadow-toggle-pill:    0 2px 4px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);

  --text-primary:   rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(255, 255, 255, 0.66);
  --text-disabled:  rgba(255, 255, 255, 0.42);
  --divider:        rgba(255, 255, 255, 0.14);
  --chart-grid:     rgba(255, 255, 255, 0.08);

  --brand-primary:    #3586FF;
  --brand-ink:        #FFFFFF;
  --brand-on-primary: #FFFFFF;
  --brand-muted-bg:   #1E242C;
  --brand-muted-fg:   #FFFFFF;
  --info-accent:      #96BFFC;

  --state-up:        #4BC0C0;
  --state-down:      #FF6384;
  --state-up-soft:   rgba(75, 192, 192, 0.5);
  --state-down-soft: rgba(255, 99, 132, 0.5);
  --state-neutral:   #7C8699;

  --ob-bar-up:       rgba(75, 192, 192, 0.25);
  --ob-bar-down:     rgba(255, 99, 132, 0.25);

  /* quality verdict cards */
  --quality-high:   #34d399;
  --quality-medium: #fbbf24;
  --quality-low:    #fb7185;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
 * Site palettes -- selectable from /admin/, persisted in SiteSettings.palette,
 * server-stamped onto <html data-palette="...">. Each palette redeclares the
 * SIX "state" tokens only: --state-up, --state-down, --state-up-soft,
 * --state-down-soft, --ob-bar-up, --ob-bar-down. Surfaces, text, and
 * --state-neutral keep flowing through the light/dark theme cascade above
 * (orthogonal axes).
 *
 * Cascade math: selector `:root[data-palette="X"]` is (0,1,0) and
 * `:root[data-palette="X"][data-theme="Y"]` is (0,2,0); both beat
 * `:root[data-theme="Y"]` (0,1,0) and `:root` inside @media (0,0,1).
 * Source order then breaks ties between equal-specificity selectors. The
 * upshot: a palette block always wins over the bare theme cascade.
 *
 * TradingView and MotionTrade use the SAME literal values in light and dark.
 * The brand spec is explicit and we honor it; the duplication is intentional.
 * In particular, MotionTrade's down color `#1F2328` is a literal near-black
 * even in dark mode -- pinned by frontend/tests/palette-resolution.spec.ts so
 * a well-meaning future contributor cannot quietly "fix" it.
 * --------------------------------------------------------------------------- */

:root[data-palette="basic"] {
  --state-up:        #4BC0C0;
  --state-down:      #FF6384;
  --state-up-soft:   rgba(75, 192, 192, 0.5);
  --state-down-soft: rgba(255, 99, 132, 0.5);
  --ob-bar-up:       rgba(75, 192, 192, 0.25);
  --ob-bar-down:     rgba(255, 99, 132, 0.25);
}

/* TradingView -- candle bodies + volume bars use the SOLID brand color
 * (no alpha softening). That's expressed by setting `--state-*-soft` to the
 * same value as `--state-*` so every consumer (candle bodies, volume bars,
 * depth chart fills, spikes widget) inherits the change. Orderbook depth
 * bars stay at the standard 0.25 alpha. */
:root[data-palette="tradingview"],
:root[data-palette="tradingview"][data-theme="light"],
:root[data-palette="tradingview"][data-theme="dark"] {
  --state-up:        #0C8E76;
  --state-down:      #F02F3C;
  --state-up-soft:   #0C8E76;
  --state-down-soft: #F02F3C;
  --ob-bar-up:       rgba(12, 142, 118, 0.25);
  --ob-bar-down:     rgba(240, 47, 60, 0.25);
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="tradingview"] {
    --state-up:        #0C8E76;
    --state-down:      #F02F3C;
    --state-up-soft:   #0C8E76;
    --state-down-soft: #F02F3C;
    --ob-bar-up:       rgba(12, 142, 118, 0.25);
    --ob-bar-down:     rgba(240, 47, 60, 0.25);
  }
}

/* MotionTrade -- same SOLID-fill rule as TradingView, plus a punchier
 * orderbook depth bar at 0.5 alpha (vs 0.25 in basic/tradingview) so the
 * blue-on-blue fill reads at a glance. */
:root[data-palette="motiontrade"],
:root[data-palette="motiontrade"][data-theme="light"],
:root[data-palette="motiontrade"][data-theme="dark"] {
  --state-up:        #307BFF;
  --state-down:      #1F2328;
  --state-up-soft:   #307BFF;
  --state-down-soft: #1F2328;
  --ob-bar-up:       rgba(48, 123, 255, 0.5);
  --ob-bar-down:     rgba(31, 35, 40, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="motiontrade"] {
    --state-up:        #307BFF;
    --state-down:      #1F2328;
    --state-up-soft:   #307BFF;
    --state-down-soft: #1F2328;
    --ob-bar-up:       rgba(48, 123, 255, 0.5);
    --ob-bar-down:     rgba(31, 35, 40, 0.5);
  }
}