/* ============================================================
   COLORS — dual theme.
   Default (:root) is the DARK desk theme — the primary surface
   traders live in. [data-theme="light"] is the warm "paper" theme.

   ICE CYAN is the positive-PnL color (yield reads cold and
   technical, not casino-green); CORAL is reserved for negative
   PnL and danger; GOLD stays the caution color. The brand chrome
   accent remains MONOCHROME so it never competes with the data.

   Every pair is validated (dataviz six-checks) against the real
   card surfaces. TUNED 2026-07-21b after user feedback ("cyan too
   sharp at night, faded by day"): dark ink SOFTENED #4dd6e8→#54b3c4
   (contrast 10.9→7.8:1, CVD ΔE 13.0 deutan — the sharpness was
   excess contrast+chroma, not the hue); light ink DEEPENED
   #0a86a3→#00719a (contrast 4.06→5.25 AND chroma above the gray
   floor — cyan on warm cream reads faded unless darker AND richer
   together; ALL six checks pass, as does light fill #0089ad and
   light coral #c23a31). Dark fills #17a0be/#db4f4f unchanged, ALL
   PASS. INK tokens colour text and 2px strokes, where WCAG contrast
   is the binding constraint (band/chroma-floor are fill rules).
   Solid area marks (bars, scatter dots) must use --pos-fill /
   --neg-fill, which sit inside the band. Don't collapse the two
   tiers back into one.
   ============================================================ */

:root {
  /* ---- raw ice-cyan ramp (cyan = yield) ---- */
  --cyan-050: #e6f9fc;
  --cyan-100: #c3f0f7;
  --cyan-200: #8fe2ef;
  --cyan-300: #63becf;
  --cyan-400: #54b3c4;   /* dark-theme PnL ink — softened 2026-07-21b, see header */
  --cyan-500: #17a0be;   /* dark-theme area fill (in lightness band) */
  --cyan-600: #0089ad;   /* light-theme area fill */
  --cyan-700: #00719a;   /* light-theme PnL ink */
  --cyan-800: #085e73;
  --cyan-900: #06323d;

  /* ---- raw coral ramp (loss / danger) ---- */
  --red-300: #f79b9b;
  --red-400: #f26d6d;    /* dark-theme PnL ink */
  --red-500: #db4f4f;    /* dark-theme area fill (in lightness band) */
  --red-600: #c23a31;    /* light-theme ink + fill */
  --red-700: #a83a33;

  /* ---- raw gold ramp (caution — quiet, not neon) ---- */
  --gold-300: #edcf83;
  --gold-400: #e0b64a;
  --gold-500: #c99a2c;
  --gold-600: #a9791b;

  /* ---- raw blue ramp (info / links) ---- */
  --blue-300: #97c1f5;
  --blue-400: #6aa6f0;
  --blue-500: #3d82db;
  --blue-600: #2d6fc9;

  /* =========================================================
     DARK THEME (default)
     Cool graphite neutral — the old "whisper of green" tint is
     gone; the page must not lean green anywhere.
     ========================================================= */
  --bg-base:      #0a0b0d;
  --bg-sunken:    #070809;
  --surface-1:    #0f1114;   /* cards */
  --surface-2:    #15181c;   /* elevated / insets / table headers */
  --surface-3:    #1d2126;   /* hover / active insets */

  --border-subtle:  #1a1e23;
  --border-default: #262b32;
  --border-strong:  #353d47;

  --text-primary:     #e8eaee;
  --text-secondary:   #99a1ab;
  --text-tertiary:    #6b727c;
  --text-quaternary:  #4a5059;

  /* semantic accent — MONOCHROME by design. Cyan/coral are reserved for PnL
     and value direction only, so the brand never competes with the data. */
  --accent:          #f1f3f6;   /* near-white chrome on the dark desk */
  --accent-hover:    #ffffff;
  --accent-press:    #ccd1d8;
  --accent-soft:     rgba(241, 243, 246, 0.10);
  --accent-softer:   rgba(241, 243, 246, 0.05);
  --accent-line:     rgba(241, 243, 246, 0.28);
  --accent-contrast: #0a0b0d;   /* dark text/icon sitting ON accent fills */

  /* semantic data colors — INK tier (text, pills, 2px strokes) */
  --pos:       var(--cyan-400);
  --pos-soft:  rgba(84, 179, 196, 0.12);
  --neg:       var(--red-400);
  --neg-soft:  rgba(242, 109, 109, 0.14);
  /* FILL tier — solid area marks only (bars, dots); inside the dark band */
  --pos-fill:  var(--cyan-500);
  --neg-fill:  var(--red-500);
  --warn:      var(--gold-400);
  --warn-soft: rgba(224, 182, 74, 0.12);
  --info:      var(--blue-400);
  --info-soft: rgba(106, 166, 240, 0.12);

  /* long / short venue coding */
  --long:  var(--cyan-400);
  --short: var(--red-400);

  --focus-ring: rgba(241, 243, 246, 0.55);
  --backdrop:   rgba(6, 7, 9, 0.72);

  color-scheme: dark;
}

/* =========================================================
   LIGHT THEME — warm "paper" (eco.com-inspired cream).
   The paper neutrals are warm by identity (cream, not green) and
   stay untouched; only the data colors swap to the cyan story.
   ========================================================= */
[data-theme="light"] {
  --bg-base:      #f1eee7;
  --bg-sunken:    #e7e3d9;
  --surface-1:    #fbfaf6;
  --surface-2:    #f3f1ea;
  --surface-3:    #ebe8de;

  --border-subtle:  #e6e1d6;
  --border-default: #d8d3c6;
  --border-strong:  #c3bdae;

  --text-primary:     #1f2320;
  --text-secondary:   #5a615b;
  --text-tertiary:    #868c84;
  --text-quaternary:  #a8ada4;

  --accent:          #1b1f1c;   /* near-black chrome on the paper theme */
  --accent-hover:    #000000;
  --accent-press:    #3a403b;
  --accent-soft:     rgba(27, 31, 28, 0.07);
  --accent-softer:   rgba(27, 31, 28, 0.04);
  --accent-line:     rgba(27, 31, 28, 0.20);
  --accent-contrast: #fbfaf6;

  --pos:       var(--cyan-700);
  --pos-soft:  rgba(0, 113, 154, 0.15);
  --neg:       var(--red-600);
  --neg-soft:  rgba(194, 58, 49, 0.15);
  --pos-fill:  var(--cyan-600);
  --neg-fill:  var(--red-600);
  --warn:      var(--gold-600);
  --warn-soft: rgba(169, 121, 27, 0.12);
  --info:      var(--blue-600);
  --info-soft: rgba(45, 111, 201, 0.12);

  --long:  var(--cyan-700);
  --short: var(--red-600);

  --focus-ring: rgba(27, 31, 28, 0.40);
  --backdrop:   rgba(40, 38, 32, 0.30);

  color-scheme: light;
}