/* SBE design tokens — OKLCH-first, light/dark per data-theme attr. */
:root {
  --bg-page: #FFFFFF;
  --bg-surface: #F4F5F7;
  --bg-alt: #E5EDF5;
  --bg-hover: #EEF0F4;
  --bg-elevated: #FFFFFF;

  --text-primary: #0A2A51;
  --text-secondary: #2B2F36;
  --text-muted: #7A8190;

  --border: #E0E3EA;
  --border-strong: #C7CDD7;

  --accent: #ABA456;
  --accent-strong: #7C6E30;
  --accent-soft: #C3B46D;

  --ok: #2E7D32;
  --warn: #ED8C00;
  --danger: #C62828;
  --info: #1E5BA8;
  --agent: #6D5DD3;

  --accent-bg-5:  color-mix(in oklch, var(--accent), transparent 95%);
  --accent-bg-15: color-mix(in oklch, var(--accent), transparent 85%);
  --ok-bg-15:     color-mix(in oklch, var(--ok), transparent 85%);
  --warn-bg-15:   color-mix(in oklch, var(--warn), transparent 85%);
  --danger-bg-15: color-mix(in oklch, var(--danger), transparent 85%);
  --agent-bg-5:   color-mix(in oklch, var(--agent), transparent 95%);

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --shadow-sm: 0 1px 2px oklch(0.228 0.067 259 / 0.04);
  --shadow-md: 0 2px 8px oklch(0.228 0.067 259 / 0.06);
  --shadow-lg: 0 8px 24px oklch(0.228 0.067 259 / 0.08);

  --motion-fast: 150ms;
  --motion-base: 200ms;
  --motion-slow: 300ms;

  /* Console / log panel — dark surface in both themes
     (gives a clear "technical output" affordance). */
  --bg-console: #0F172A;
  --text-console: #E2E8F0;
  --text-console-ok: #4ADE80;
  --text-console-warn: #FBBF24;
  --text-console-err: #F87171;
  --text-console-syntax: #7DD3FC;

  /* Chart series — per-language hue palette. Latency chart and any
     future per-stream visualisation share these so colours never drift. */
  --lang-raw: #6E7681;
  --lang-ru:  #1E5BA8;
  --lang-kk:  #2E7D32;
  --lang-en:  #ABA456;

  color-scheme: light dark;
}

[data-theme="dark"] {
  --bg-page: #0F1115;
  --bg-surface: #161A22;
  --bg-elevated: #1C222D;
  --bg-overlay: #242A37;
  --bg-alt: #1C222D;
  --bg-hover: #1E232E;

  --text-primary: #E6EDF3;
  --text-secondary: #B0B8C4;
  --text-muted: #6E7681;

  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.16);

  --accent: #C3B46D;
  --accent-strong: #D5C988;
  --accent-soft: #B6A75D;

  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* Console blends into Dark elevation ladder, not the hardcoded navy. */
  --bg-console: #1C222D;

  /* Chart series — lifted hues for legibility on dark background. */
  --lang-raw: #9BA3B0;
  --lang-ru:  #5B8BD2;
  --lang-kk:  #5FA862;
  --lang-en:  #C3B46D;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: #0F1115;
    --bg-surface: #161A22;
    --bg-elevated: #1C222D;
    --bg-overlay: #242A37;
    --bg-alt: #1C222D;
    --bg-hover: #1E232E;
    --text-primary: #E6EDF3;
    --text-secondary: #B0B8C4;
    --text-muted: #6E7681;
    --border: rgba(255, 255, 255, 0.06);
    --border-strong: rgba(255, 255, 255, 0.16);
    --accent: #C3B46D;
    --accent-strong: #D5C988;
    --accent-soft: #B6A75D;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;

    --bg-console: #1C222D;
    --lang-raw: #9BA3B0;
    --lang-ru:  #5B8BD2;
    --lang-kk:  #5FA862;
    --lang-en:  #C3B46D;
  }
}