/* ============================================================================
   IFX — Color tokens. Two themes, one set.
   Brand primitives (the six "color notes" + exchange essentials) are
   theme-independent; semantic aliases are remapped per theme.

   Floor (light) = the editorial / marketing surface (off-white mint ground).
   Pit   (dark)  = the trading surface (deep ink ground).
   Switch with data-theme="dark" (or class .dark) on any ancestor.
   ========================================================================== */

:root {
  /* ---- Brand primitives (theme-independent) — the "color notes" ---- */
  --ifx-ob: #f4fdf8;     /* off-white mint ground */
  --ifx-ink: #191c1e;    /* near-black ink */
  --ifx-iris: #5b54d6;   /* indigo — accent / categorical */
  --ifx-ocean: #4bb7e4;  /* blue   — info / index / links */
  --ifx-mist: #8bb4b5;   /* teal   — muted / idle */
  --ifx-forest: #009946; /* green  — long / up / bid */
  --ifx-tomato: #ff6633; /* orange — volume / dated */
  --ifx-deep: #0e698f;   /* deep sky blue — links (light) */

  /* exchange essentials added to the palette */
  --ifx-signal: #e5484d; /* red    — short / down / ask */
  --ifx-lime: #1fc16b;   /* brighter green for dark grounds */
  --ifx-amber: #f5a524;  /* warning */
}

/* ============================================================================
   FLOOR (light) — default
   ========================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg: var(--ifx-ob);
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #eaf3ee;
  --surface-3: #dde9e3;
  --overlay: rgba(25, 28, 30, 0.45);

  --text: var(--ifx-ink);
  --text-muted: #5e756e;
  --text-subtle: #8ba0a0;
  --text-inverse: var(--ifx-ob);

  --border: rgba(25, 28, 30, 0.14);
  --border-strong: rgba(25, 28, 30, 0.32);
  --border-dotted: var(--ifx-ink);

  --accent: var(--ifx-iris);
  --accent-fg: var(--ifx-ob);
  --link: var(--ifx-deep);
  --link-hover: var(--ifx-ocean);
  --focus-ring: var(--ifx-ocean);

  /* market semantics */
  --up: var(--ifx-forest);
  --up-bg: rgba(0, 153, 70, 0.1);
  --down: var(--ifx-signal);
  --down-bg: rgba(229, 72, 77, 0.1);
  --info: var(--ifx-ocean);
  --info-bg: rgba(75, 183, 228, 0.1);
  --warn: var(--ifx-amber);
  --warn-bg: rgba(245, 165, 36, 0.12);
  --neutral: var(--ifx-mist);

  /* categorical "color notes" (tags / series) */
  --note-iris: var(--ifx-iris);
  --note-ocean: var(--ifx-ocean);
  --note-mist: var(--ifx-mist);
  --note-forest: var(--ifx-forest);
  --note-orange: var(--ifx-tomato);
  --note-ink: var(--ifx-ink);

  /* component aliases */
  --btn-fg: var(--ifx-ob);
  --btn-bg: var(--ifx-ink);
  --depth-bid: rgba(0, 153, 70, 0.16);
  --depth-ask: rgba(229, 72, 77, 0.16);
  --shadow: 0 1px 0 rgba(25, 28, 30, 0.08);
  --shadow-pop: 0 8px 28px rgba(25, 28, 30, 0.12);

  /* ascii background field */
  --ascii-dim: rgba(25, 28, 30, 0.12);
  --ascii-mid: rgba(25, 28, 30, 0.22);
  --ascii-hot: rgba(0, 153, 70, 0.30);
}

/* ============================================================================
   PIT (dark) — the trading surface
   ========================================================================== */
[data-theme="dark"],
.dark {
  color-scheme: dark;

  --bg: #0c0e0f;
  --bg-elevated: #14181a;
  --surface: #14181a;
  --surface-2: #1b2124;
  --surface-3: #232b2e;
  --overlay: rgba(0, 0, 0, 0.6);

  --text: #eaf2ee;
  --text-muted: #8ba0a0;
  --text-subtle: #5b6b6b;
  --text-inverse: var(--ifx-ink);

  --border: rgba(234, 242, 238, 0.12);
  --border-strong: rgba(234, 242, 238, 0.26);
  --border-dotted: rgba(234, 242, 238, 0.5);

  --accent: var(--ifx-iris);
  --accent-fg: var(--ifx-ob);
  --link: #5cc6ef;
  --link-hover: #8ad6f3;
  --focus-ring: var(--ifx-ocean);

  --up: var(--ifx-lime);
  --up-bg: rgba(31, 193, 107, 0.14);
  --down: #ff5d57;
  --down-bg: rgba(255, 93, 87, 0.14);
  --info: var(--ifx-ocean);
  --info-bg: rgba(75, 183, 228, 0.12);
  --warn: var(--ifx-amber);
  --warn-bg: rgba(245, 165, 36, 0.14);
  --neutral: var(--ifx-mist);

  --note-iris: var(--ifx-iris);
  --note-ocean: var(--ifx-ocean);
  --note-mist: var(--ifx-mist);
  --note-forest: var(--ifx-lime);
  --note-orange: var(--ifx-tomato);
  --note-ink: #eaf2ee;

  --btn-fg: var(--ifx-ink);
  --btn-bg: var(--ifx-ob);
  --depth-bid: rgba(31, 193, 107, 0.16);
  --depth-ask: rgba(255, 93, 87, 0.16);
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.55);

  --ascii-dim: rgba(234, 242, 238, 0.10);
  --ascii-mid: rgba(234, 242, 238, 0.20);
  --ascii-hot: rgba(31, 193, 107, 0.34);
}