/* ═══════════════════════════════════════════════════════════════
   HARAZI — Design tokens
   Terminal-dark, crypto-native. All hex codes live here.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces ──────────────────────────────────────────── */
  --bg-0:      #07090d;           /* page background */
  --bg-1:      #0c1018;           /* panels */
  --bg-2:      #131824;           /* elevated rows, card headers */
  --bg-3:      #1a2030;           /* hover, selected */
  --bg-4:      #242b3d;           /* active chip, pressed */
  --border:    #1f2533;           /* hairlines */
  --border-hi: #2b3344;           /* card borders, focus outline */

  /* ── Text ──────────────────────────────────────────────── */
  /* Contrast (a11y): ratios are vs --bg-1. --text-2 was #5b6573 (≈3.0:1,
     fails WCAG AA for body) — bumped to #818b9c (≈4.6:1) since it's used
     for .dim captions/labels everywhere. --text-3 stays reserved for
     genuinely non-essential decoration (NOT empty-state copy — that uses
     --text-1; see .tbl--empty override). */
  --text-0:    #e8ecf3;           /* primary */
  --text-1:    #9aa3b2;           /* secondary, labels */
  --text-2:    #818b9c;           /* tertiary, captions — AA on bg-1 */
  --text-3:    #5b6573;           /* decoration only (not essential text) */

  /* ── Legacy aliases ────────────────────────────────────────
     Earlier files (admin.css, auth.css, landing.css, mobile.css,
     and bits of components.css) used --fg / --fg-2 / --fg-3 /
     --bg / --line tokens that were never defined. Their
     var(--fg, #e8ecf3) fallbacks shipped near-white text on BOTH
     themes — invisible on light. Aliasing them to the canonical
     tokens here makes every legacy usage theme-aware in one shot.
     Both dark + light blocks below carry the same alias names. */
  --fg:        var(--text-0);
  --fg-2:      var(--text-1);
  --fg-3:      var(--text-2);
  --fg-dim:    var(--text-2);
  --fg-mute:   var(--text-3);
  --bg:        var(--bg-0);
  --bg-card:   var(--bg-1);
  --bg-elev:   var(--bg-2);
  --line:      var(--border);
  --border-2:  var(--border-hi);
  --blue:      var(--info);
  --green:     var(--win);
  --amber:     var(--warn);

  /* ── Directional semantics ─────────────────────────────── */
  --bull:       #26a69a;          /* TradingView teal */
  --bull-soft:  rgba(38, 166, 154, 0.12);
  --bull-line:  rgba(38, 166, 154, 0.35);
  --bear:       #ef5350;
  --bear-soft:  rgba(239, 83, 80, 0.12);
  --bear-line:  rgba(239, 83, 80, 0.35);
  --win:        #3ed598;
  --win-soft:   rgba(62, 213, 152, 0.14);
  --loss:       #ff5470;
  --loss-soft:  rgba(255, 84, 112, 0.14);
  --warn:       #ffb547;
  --warn-soft:  rgba(255, 181, 71, 0.14);
  --info:       #4d8eff;
  --info-soft:  rgba(77, 142, 255, 0.14);
  --accent:     #b888ff;
  --accent-soft:rgba(184, 136, 255, 0.14);

  /* ── Market-type accents (forward-compat) ──────────────── */
  --mkt-spot:   #4d8eff;
  --mkt-perp:   #b888ff;
  --mkt-fx:     #ffb547;

  /* ── Typography ────────────────────────────────────────── */
  --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', ui-monospace, monospace;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-28: 28px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-tight: 1.1;
  --lh-base:  1.4;
  --lh-loose: 1.6;

  /* ── Space scale ───────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;

  /* ── Structural ────────────────────────────────────────── */
  --h-topbar:    44px;
  --h-statusbar: 28px;
  --h-row:       32px;
  --h-toolbar:   40px;

  --r-1: 3px;
  --r-2: 5px;
  --r-3: 7px;
  --r-4: 10px;

  /* ── Animation ─────────────────────────────────────────── */
  --t-fast:  120ms ease;
  --t-base:  180ms ease;
  --t-slow:  260ms ease;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-1: 0 1px 0 rgba(0,0,0,.4);
  --shadow-2: 0 4px 12px rgba(0,0,0,.45);
  --shadow-3: 0 8px 28px rgba(0,0,0,.55);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.02);

  /* ── Theme-conditional colors (default = dark) ────────── */
  /* These get FLIPPED under [data-theme="light"]. Components that
     need to know "what color is the page background" should reference
     --surface-base instead of hard-coding #0a0e16 / #ffffff. */
  --surface-base: #0a0e16;   /* the chart canvas / modal backdrop fallback */
  --surface-hi:   #1a2030;   /* slightly lifted surface */
  --on-surface:   #e8edf5;   /* text/icon color on --surface-base */
  /* Watermark / faint overlays on the chart — visible but recessive. */
  --chart-watermark: rgba(232,236,243,0.045);
  --chart-grid:      rgba(255,255,255,0.05);
  --chart-crosshair: rgba(255,255,255,0.40);
  /* Image inversion filter — bybit white wordmark, etc. */
  --img-invert: 0;
}


/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME — overrides every surface/text/border/shadow token.
   Style: Linear/Notion creamy whites, NOT pure #ffffff (which is
   blinding and reveals every off-by-one pixel). Accents are nudged
   for contrast on white. Designed so a user can toggle and feel
   "this is the same app, just brighter" — no jarring color shifts.
   ══════════════════════════════════════════════════════════════ */
:root[data-theme="light"],
[data-theme="light"] {
  /* Surfaces — slightly cooler than warm grays, matches the dark palette's blue tint */
  --bg-0:      #f4f6fa;           /* page bg */
  --bg-1:      #ffffff;           /* panels */
  --bg-2:      #f7f9fc;           /* elevated rows */
  --bg-3:      #edf0f6;           /* hover */
  --bg-4:      #dfe4ee;           /* active */
  --border:    #e2e7ef;
  --border-hi: #cbd1dd;

  /* Text — high contrast at the top, gentle taper down */
  --text-0:    #0d1320;
  --text-1:    #475065;
  --text-2:    #7a8497;
  --text-3:    #a8b0bf;

  /* Directional + status — bumped saturation for visibility on white */
  --bull:       #0f9d75;
  --bull-soft:  rgba(15, 157, 117, 0.12);
  --bull-line:  rgba(15, 157, 117, 0.35);
  --bear:       #d63838;
  --bear-soft:  rgba(214, 56, 56, 0.10);
  --bear-line:  rgba(214, 56, 56, 0.35);
  --win:        #0f9d75;
  --win-soft:   rgba(15, 157, 117, 0.14);
  --loss:       #d63838;
  --loss-soft:  rgba(214, 56, 56, 0.12);
  --warn:       #9a5b00;   /* AA on white — was #b76e00 (4.0:1, failed for small labels) */
  --warn-soft:  rgba(183, 110, 0, 0.14);
  --info:       #2563eb;
  --info-soft:  rgba(37, 99, 235, 0.10);
  --accent:     #6b21d4;
  --accent-soft:rgba(107, 33, 212, 0.10);

  --mkt-spot:   #2563eb;
  --mkt-perp:   #6b21d4;
  --mkt-fx:     #b76e00;

  /* Shadows — barely-there, since pure black on white is too harsh */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-2: 0 4px 12px rgba(15, 23, 42, .08);
  --shadow-3: 0 12px 32px rgba(15, 23, 42, .12);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .6);

  /* Surface tokens */
  --surface-base: #ffffff;
  --surface-hi:   #f0f2f7;
  --on-surface:   #0d1320;

  /* Chart overlays — subtle dark on white instead of subtle white on dark */
  --chart-watermark: rgba(15, 23, 42, 0.045);
  --chart-grid:      rgba(15, 23, 42, 0.06);
  --chart-crosshair: rgba(15, 23, 42, 0.45);

  /* Bybit logo PNG is white-on-transparent (designed for dark themes).
     Invert it under light theme so the wordmark renders as dark text. */
  --img-invert: 1;
}


/* ═══════════════════════════════════════════════════════════════
   Targeted light-theme overrides for components with hard-coded dark
   rgba surfaces. Each rule maps the literal dark-tinted background to
   a light equivalent so the component remains legible.
   ══════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  /* ── Chart Settings modal — invert the glass surfaces ─────── */
}
[data-theme="light"] .cs-modal {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(107,33,212,0.05), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
  border-color: var(--border-hi);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 30px 80px -10px rgba(15,23,42,0.18),
    0 0 0 1px rgba(15,23,42,0.04);
  color: var(--text-0);
}
[data-theme="light"] .cs-modal__head,
[data-theme="light"] .cs-modal__foot {
  border-color: var(--border);
}
[data-theme="light"] .cs-nav {
  background: linear-gradient(180deg, rgba(15,23,42,0.02), rgba(15,23,42,0.01));
  border-right-color: var(--border);
}
[data-theme="light"] .cs-nav__item.is-active {
  background: var(--info-soft);
  border-color: color-mix(in srgb, var(--info) 30%, transparent);
  color: var(--info);
}
[data-theme="light"] .cs-dropdown__trigger,
[data-theme="light"] .cs-select {
  background: var(--bg-1);
  border-color: var(--border-hi);
  color: var(--text-0);
}
[data-theme="light"] .cs-dropdown__panel,
[data-theme="light"] .cs-cp__pop {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(107,33,212,0.04), transparent 60%),
    var(--bg-1);
  border-color: var(--border-hi);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 20px 50px -10px rgba(15,23,42,0.15),
    0 0 0 1px rgba(15,23,42,0.04);
  color: var(--text-0);
}
[data-theme="light"] .cs-dropdown__item:hover {
  background: var(--bg-3);
  color: var(--text-0);
}
[data-theme="light"] .cs-stepper,
[data-theme="light"] .cs-segmented {
  background: var(--bg-2);
  border-color: var(--border-hi);
  box-shadow: inset 0 1px 2px rgba(15,23,42,0.06);
}
[data-theme="light"] .cs-stepper__btn {
  background: var(--bg-1);
  border-color: var(--border);
  color: var(--text-1);
}
[data-theme="light"] .cs-check__box {
  background: var(--bg-1);
  border-color: var(--border-hi);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}
[data-theme="light"] .cs-row {
  border-bottom-color: var(--border);
}
[data-theme="light"] .cs-cp__hex {
  background: var(--bg-2);
  border-color: var(--border);
}
[data-theme="light"] .cs-cp__hex input,
[data-theme="light"] .cs-stepper__input {
  color: var(--text-0);
}
[data-theme="light"] .cs-cp__native {
  background: var(--bg-2);
  border-color: var(--border);
}

/* ── Drawings settings popup — same treatment ──────────────── */
[data-theme="light"] .draw-settings,
[data-theme="light"] .draw-flyout,
[data-theme="light"] .draw-ctxmenu,
[data-theme="light"] .draw-cheatsheet {
  background: var(--bg-1);
  border-color: var(--border-hi);
  color: var(--text-0);
  box-shadow: var(--shadow-3);
}
[data-theme="light"] .draw-toolbar {
  background: var(--bg-1);
  border-right-color: var(--border);
}
[data-theme="light"] .draw-tool:hover {
  background: var(--bg-3);
  color: var(--text-0);
}
[data-theme="light"] .draw-toolbar__sep {
  background: var(--border);
}

/* ── Indicators panel ─────────────────────────────────────── */
[data-theme="light"] .ind-panel,
[data-theme="light"] .ind-section {
  background: var(--bg-1);
  border-color: var(--border);
  color: var(--text-0);
}

/* ── Symbol search dropdown ───────────────────────────────── */
[data-theme="light"] .symsearch__dd,
[data-theme="light"] .sym-dd {
  background: var(--bg-1);
  border-color: var(--border-hi);
  box-shadow: var(--shadow-3);
  color: var(--text-0);
}
[data-theme="light"] .symsearch__item:hover,
[data-theme="light"] .symsearch__item.focused {
  background: color-mix(in srgb, var(--info) 8%, transparent);
}
/* Dropdown row internals — every text class hardcodes a near-white
   color in components.css that's invisible on a white panel. Flip
   them to the proper light-theme token. */
[data-theme="light"] .symsearch__name    { color: var(--text-0); }
[data-theme="light"] .symsearch__desc    { color: var(--text-2); }
[data-theme="light"] .symsearch__meta    { color: var(--text-2); }
[data-theme="light"] .symsearch__market  {
  background: rgba(15,23,42,0.06);
  color: var(--text-1);
}
[data-theme="light"] .symsearch__market--perp {
  background: rgba(139,92,246,0.12);
  color: #7c3aed;
}
[data-theme="light"] .symsearch__market--spot {
  background: rgba(5,150,105,0.12);
  color: #047857;
}
[data-theme="light"] .symsearch__market--fx {
  background: rgba(202,138,4,0.14);
  color: #a16207;
}
[data-theme="light"] .symsearch__exchange { color: var(--text-1); }
[data-theme="light"] .symsearch__ex-logo  {
  background: rgba(15,23,42,0.06);
}
[data-theme="light"] .symsearch__empty,
[data-theme="light"] .harazi-loader-inline {
  color: var(--text-2);
}

/* Search input itself — components.css ships dark-mode rules with
   !important so we have to match that specificity here. The dark
   defaults render white-on-white on light theme, which is why this
   block exists. Tested across Explorer, Backtest header, Setups
   quick-filter — all use the same .symsearch__input class. */
[data-theme="light"] .symsearch__input {
  background:
    linear-gradient(180deg, rgba(15,23,42,0.018), rgba(15,23,42,0.005)) !important;
  border-color: var(--border) !important;
  color: var(--text-0) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 1px 2px rgba(15,23,42,0.04) !important;
}
[data-theme="light"] .symsearch__input:focus {
  border-color: var(--info) !important;
  background:
    linear-gradient(180deg, rgba(37,99,235,0.06), rgba(37,99,235,0.02)) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--info) 18%, transparent),
    0 1px 0 rgba(255,255,255,0.6) inset !important;
}
[data-theme="light"] .symsearch__input::placeholder {
  color: var(--text-2);
}
[data-theme="light"] .symsearch__icon {
  color: var(--text-2);
}

/* Backtest header has its own pill-wrapped variant of the symsearch
   (.backtest .symsearch / .backtest .symsearch__input) defined in
   pages.css with !important + hard-coded dark surfaces. Mirror those
   selectors here so the wrapper and input both flip on light theme. */
[data-theme="light"] .backtest .symsearch {
  background:
    linear-gradient(180deg, rgba(15,23,42,0.02), rgba(15,23,42,0.005)) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset !important;
}
[data-theme="light"] .backtest .symsearch:focus-within {
  border-color: var(--info) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 18%, transparent) !important;
}
[data-theme="light"] .backtest .symsearch__input { color: var(--text-0) !important; }
[data-theme="light"] .backtest .symsearch__icon  { color: var(--text-2) !important; }
[data-theme="light"] .backtest .symsearch__input::placeholder { color: var(--text-2) !important; }

/* ── Defensive: admin-only inputs (admin.css uses var(--fg, #e8ecf3) which
   falls back to near-white because --fg was never defined in tokens.css —
   these inputs were invisible on light theme). Force readable text/bg. */
[data-theme="light"] .admin-input {
  background: var(--bg-1) !important;
  border-color: var(--border) !important;
  color: var(--text-0) !important;
}
[data-theme="light"] .admin-input:focus {
  border-color: var(--info) !important;
}

/* ── Safety net for plain text inputs on light theme. Low specificity
   so any component-specific light-theme rule still wins. Catches inputs
   whose dark-mode rule hardcoded white/near-white color (rare, but real
   — see admin-input + symsearch-input above). */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="search"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input:not([type]),
[data-theme="light"] textarea {
  color: var(--text-0);
}

/* ── Watchlist chips — flip surface + text ─────────────────── */
[data-theme="light"] .wl-chip {
  background:
    linear-gradient(180deg, rgba(15,23,42,0.025), rgba(15,23,42,0.005)),
    var(--bg-1);
  border-color: var(--border);
  color: var(--text-0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
[data-theme="light"] .wl-chip:hover {
  background:
    linear-gradient(180deg, var(--info-soft), rgba(37,99,235,0.04)),
    var(--bg-1);
  border-color: color-mix(in srgb, var(--info) 30%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 6px 14px -6px rgba(37,99,235,0.25);
}

/* ── Banner / footer / borders in misc components ──────────── */
[data-theme="light"] .topbar {
  background: var(--bg-1);
  border-bottom-color: var(--border);
}
[data-theme="light"] .topbar__brand-name {
  /* The 3D extrusion shadow doesn't read well on white — drop the
     drop-shadow and lean on a flat dark navy for the wordmark. */
  color: #15192a;
  text-shadow: none;
}
[data-theme="light"] .topbar__brand-spark {
  color: var(--info);
  text-shadow: none;
}
[data-theme="light"] .statusbar,
[data-theme="light"] .draw-area,
[data-theme="light"] .explorer__chart,
[data-theme="light"] body {
  color: var(--text-0);
}
[data-theme="light"] body { background: var(--bg-0); }

/* ── Error-boundary banner — flip background to light surface ─── */
[data-theme="light"] .harazi-err-banner {
  background:
    linear-gradient(180deg, rgba(183,110,0,0.12), rgba(183,110,0,0.06)),
    var(--bg-1);
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
  color: var(--warn);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 14px 36px -10px rgba(15,23,42,0.15);
}
[data-theme="light"] .harazi-err-banner__text { color: var(--text-0); }

/* ── Inputs — text color and placeholder ────────────────────── */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  color: var(--text-0);
}
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: var(--text-2);
}