/* Zorabot theme tokens - "trading desk" identity (design system v1).

   Dark is the base (:root); light is an override under [data-theme="light"].
   The pre-paint script in base.html stamps data-theme, so the base dark set is
   also the no-JS default. Structural tokens (font/radius) are shared; only the
   colour/effect tokens flip between skins. */

:root {
  /* Structural */
  /* The *-Fallback faces are metric-matched stand-ins (see fonts.css), so the
     swap when the real font arrives does not resize the text. */
  --font: "IBM Plex Sans", "Plex Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Sora", "Sora Fallback", var(--font);
  --font-mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display-tracking: -0.02em;
  --radius: 14px;
  color-scheme: dark;

  /* Dark palette (default) */
  --bg: #050b1d;
  --surface: #0d1834;
  --page-glow: radial-gradient(ellipse 900px 520px at 50% -14%, rgba(43, 140, 255, 0.20), transparent 62%);
  --bg-card: rgba(122, 170, 255, 0.055);
  --bg-elevated: #101d3c;
  --border: rgba(120, 165, 255, 0.22);
  --text: #e9eefb;
  --muted: #93a2c4;
  --shadow: 0 1px 0 rgba(160, 200, 255, 0.05) inset, 0 18px 44px rgba(0, 0, 0, 0.5);

  --accent: #2b96ff;
  --accent-2: #2bd9ff;
  --accent-text: #5fd4f4;
  --accent-gradient: linear-gradient(135deg, #2b96ff, #2bd9ff);
  --accent-contrast: #031024;
  --accent-soft: rgba(43, 150, 255, 0.12);
  --accent-line: rgba(110, 160, 255, 0.30);
  --logo-glow: 0 4px 18px rgba(43, 180, 255, 0.4);
  --btn-glow: 0 6px 22px rgba(43, 180, 255, 0.35);
  --hero-grad-color: transparent;

  --ok: #63e6b0;  --ok-soft: rgba(99, 230, 176, 0.12);  --ok-line: rgba(99, 230, 176, 0.30);
  --warn: #f5c04e; --warn-soft: rgba(245, 192, 78, 0.12); --warn-line: rgba(245, 192, 78, 0.30);
  --err: #ff6b7a; --err-soft: rgba(255, 107, 122, 0.12); --err-line: rgba(255, 107, 122, 0.30);
  --off: #5c6a7a;

  --side-bg: #0d1834;
  --side-border: rgba(110, 160, 255, 0.16);
  --side-text: #e9eefb;
  --side-muted: #93a2c4;
  --side-hover: rgba(255, 255, 255, 0.04);
  --side-active-bg: rgba(43, 150, 255, 0.14);
  --side-active-text: #5fd4f4;

  --topbar-bg: rgba(5, 11, 29, 0.72);
  --topbar-blur: blur(12px);
  --thead-bg: rgba(120, 165, 255, 0.04);
  --row-border: rgba(120, 165, 255, 0.11);
  --row-hover: rgba(120, 170, 255, 0.05);
}

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

  --bg: #f4f7fc;
  --surface: #ffffff;
  --page-glow: radial-gradient(ellipse 900px 460px at 50% -14%, rgba(20, 130, 240, 0.12), transparent 62%);
  --bg-card: rgba(20, 60, 130, 0.035);
  --bg-elevated: #ffffff;
  --border: rgba(30, 70, 140, 0.12);
  --text: #0e1a36;
  --muted: #4c5d80;
  --shadow: 0 1px 2px rgba(20, 50, 110, 0.05), 0 12px 30px rgba(20, 50, 110, 0.08);

  --accent: #1470e0;
  --accent-2: #0da8d8;
  --accent-text: #0d6fb8;
  --accent-gradient: linear-gradient(135deg, #1470e0, #0da8d8);
  --accent-contrast: #ffffff;
  --accent-soft: rgba(20, 112, 224, 0.08);
  --accent-line: rgba(20, 112, 224, 0.28);
  --logo-glow: 0 4px 14px rgba(20, 112, 224, 0.3);
  --btn-glow: 0 6px 20px rgba(20, 112, 224, 0.28);

  --ok: #0c8a5c;  --ok-soft: rgba(12, 138, 92, 0.10);  --ok-line: rgba(12, 138, 92, 0.28);
  --warn: #b07708; --warn-soft: rgba(176, 119, 8, 0.10); --warn-line: rgba(176, 119, 8, 0.28);
  --err: #c93a4a; --err-soft: rgba(201, 58, 74, 0.08); --err-line: rgba(201, 58, 74, 0.28);
  --off: #8895a5;

  --side-bg: #ffffff;
  --side-border: rgba(30, 70, 140, 0.10);
  --side-text: #0e1a36;
  --side-muted: #4c5d80;
  --side-hover: rgba(20, 60, 130, 0.05);
  --side-active-bg: rgba(20, 130, 240, 0.08);
  --side-active-text: #0d6fb8;

  --topbar-bg: rgba(244, 247, 252, 0.8);
  --topbar-blur: blur(10px);
  --thead-bg: rgba(20, 60, 130, 0.03);
  --row-border: rgba(30, 70, 140, 0.08);
  --row-hover: rgba(20, 60, 130, 0.025);
}

body {
  background-image: var(--page-glow);
  background-repeat: no-repeat;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Glass surfaces read best on the dark skin. */
:root:not([data-theme="light"]) body { background-attachment: fixed; }
:root:not([data-theme="light"]) .card,
:root:not([data-theme="light"]) .tablewrap,
:root:not([data-theme="light"]) .auth-card { backdrop-filter: blur(8px); }