/* ============================================================================
   OMEGA AI v2 — Design tokens
   Brand blue: #0071BC (Omega Adjusting). Two themes with a user toggle:
   Aurora (light app, dark inverted sidebar) · Onyx (dark app, light sidebar).
   Every component consumes ONLY these tokens. No hardcoded colors elsewhere.
   ========================================================================== */

:root {
  /* Typography */
  --font-sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-md: 15.5px;
  --fs-lg: 17.5px;
  --fs-xl: 22px;
  --fs-2xl: 28px;

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

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;

  /* Motion */
  --t-fast: 140ms cubic-bezier(.2,.8,.3,1);
  --t-med: 240ms cubic-bezier(.2,.8,.3,1);

  /* Layout */
  --sidebar-w: 288px;
  --rail-w: 312px;
  --composer-max: 880px;
  --header-h: 56px;
}

/* ─── Aurora (light app, dark sidebar) ──────────────────────────────────── */
[data-theme="aurora"] {
  color-scheme: light;
  --bg-app:      #f2f4f8;
  --bg-chat:     #f2f4f8;
  --bg-panel:    #ffffff;
  --bg-elevated: #ffffff;
  --bg-hover:    rgba(11, 26, 43, .05);
  --bg-active:   rgba(0, 113, 188, .09);
  --bg-input:    #ffffff;
  --bg-user-msg: linear-gradient(135deg, #0071BC 0%, #0091d8 100%);
  --bg-code:     #0b1a2b;

  --text-1: #0b1a2b;
  --text-2: #3d4a63;
  --text-3: #7c8aa5;
  --text-inv: #ffffff;

  --accent:      #0071BC;
  --accent-2:    #00A3E0;
  --accent-soft: rgba(0, 113, 188, .10);
  --accent-grad: linear-gradient(135deg, #0071BC 0%, #00A3E0 100%);
  --ok:    #059669;
  --warn:  #d97706;
  --err:   #dc2626;
  --info:  #0071BC;

  --border:        rgba(11, 26, 43, .09);
  --border-strong: rgba(11, 26, 43, .16);

  --shadow-sm: 0 1px 2px rgba(11,26,43,.05);
  --shadow-md: 0 4px 16px -2px rgba(11,26,43,.10);
  --shadow-lg: 0 16px 48px -8px rgba(11,26,43,.18);
  --glow-accent: 0 0 0 3px rgba(0,113,188,.18);

  /* Inverted dark sidebar */
  --sb-bg:      #0b1a2b;
  --sb-text-1:  #eef3f9;
  --sb-text-2:  #b6c3d6;
  --sb-text-3:  #7e90a8;
  --sb-hover:   rgba(255, 255, 255, .06);
  --sb-active:  rgba(0, 163, 224, .16);
  --sb-border:  rgba(255, 255, 255, .09);
  --sb-panel:   #10233a;
}

/* ─── Onyx (dark app, light sidebar) ────────────────────────────────────── */
[data-theme="onyx"] {
  color-scheme: dark;
  --bg-app:      #0a0e15;
  --bg-chat:     #0a0e15;
  --bg-panel:    #11161f;
  --bg-elevated: #1a2130;
  --bg-hover:    rgba(255, 255, 255, .045);
  --bg-active:   rgba(56, 189, 248, .10);
  --bg-input:    #11161f;
  --bg-user-msg: linear-gradient(135deg, #0071BC 0%, #0091d8 100%);
  --bg-code:     #05070b;

  --text-1: #e9eef6;
  --text-2: #b0bacd;
  --text-3: #66738c;
  --text-inv: #ffffff;

  --accent:      #38bdf8;
  --accent-2:    #22d3ee;
  --accent-soft: rgba(56, 189, 248, .12);
  --accent-grad: linear-gradient(135deg, #0ea5e9 0%, #22d3ee 100%);
  --ok:    #34d399;
  --warn:  #fbbf24;
  --err:   #f87171;
  --info:  #38bdf8;

  --border:        rgba(255, 255, 255, .075);
  --border-strong: rgba(255, 255, 255, .14);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 4px 16px -2px rgba(0,0,0,.45);
  --shadow-lg: 0 16px 48px -8px rgba(0,0,0,.65);
  --glow-accent: 0 0 0 3px rgba(56,189,248,.22);

  /* Inverted light sidebar */
  --sb-bg:      #e9edf4;
  --sb-text-1:  #0b1a2b;
  --sb-text-2:  #46536b;
  --sb-text-3:  #8494ab;
  --sb-hover:   rgba(11, 26, 43, .06);
  --sb-active:  rgba(0, 113, 188, .13);
  --sb-border:  rgba(11, 26, 43, .09);
  --sb-panel:   #ffffff;
}