/* ── variables.css ────────────────────────────
   Theme variables, reset, base styles
   ──────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ==========================================
   Switchboard Core
   Clean utility layout · Open WebUI inspired
   ========================================== */

:root {
    /* ── Core palette (Dark — default) ────────── */
    --bg:           #0e0e10;
    --bg-surface:   #18181b;
    --bg-raised:    #222227;
    --bg-hover:     #2a2a30;
    --bg-elevated:  #42424e;
    --border:       #2e2e35;
    --border-elevated: #555560;
    --border-light: #3a3a42;
    --text:         #e8e8ed;
    --text-2:       #9898a8;
    --text-3:       #6b6b7b;
    --accent:       #6c9fff;
    --accent-hover: #84b0ff;
    --accent-dim:   rgba(108,159,255,0.12);
    --danger:       #ef4444;
    --success:      #22c55e;
    --warning:      #eab308;
    --purple:       #a78bfa;
    --purple-dim:   rgba(167,139,250,0.10);

    /* ── Contrast text for solid-color backgrounds ── */
    --text-on-color:   #fff;
    --text-on-warning: #000;

    /* ── Light variants (badge/pill text on dim backgrounds) ── */
    --accent-light:  #93c5fd;
    --danger-light:  #f87171;
    --success-light: #4ade80;
    --warning-light: #fbbf24;

    /* ── Dim variants (badge/pill backgrounds) ── */
    --danger-dim:    rgba(239,68,68,0.2);
    --success-dim:   rgba(34,197,94,0.2);
    --warning-dim:   rgba(234,179,8,0.2);

    /* ── Surfaces ────────────────────────────── */
    --bg-primary:    #0e0e10;
    --bg-secondary:  #151517;
    --overlay:       rgba(0,0,0,0.55);
    --glass:         rgba(255,255,255,0.03);
    --input-bg:      #1a1a1f;
    --user-bubble:   rgba(108,159,255,0.08);
    --danger-bg:     rgba(239,68,68,0.12);
    --bg-code:       #1a1a22;
    --shadow-lg:     0 8px 32px rgba(0,0,0,0.5);

    /* ── Layout ──────────────────────────────── */
    --radius:       8px;
    --radius-lg:    12px;
    --sidebar-w:    260px;
    --sidebar-rail: 52px;
    --font:         'DM Sans', 'Söhne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono:         'JetBrains Mono', 'Söhne Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
    --transition:   180ms ease;

    /* Banner system — set by JS from /api/v1/admin/settings/banner */
    --banner-top-height: 0px;
    --banner-bottom-height: 0px;
    --banner-bg: transparent;
    --banner-fg: transparent;

    color-scheme: dark;
}

/* ── Light Theme ─────────────────────────────── */
[data-theme="light"] {
    --bg:           #f7f7fa;
    --bg-surface:   #ffffff;
    --bg-raised:    #eff0f3;
    --bg-hover:     #e5e6eb;
    --bg-elevated:  #ffffff;
    --border:       #d5d6dc;
    --border-elevated: #c0c0c8;
    --border-light: #c2c3cb;
    --text:         #1a1a2e;
    --text-2:       #555770;
    --text-3:       #8b8da3;
    --accent:       #4a7cdb;
    --accent-hover: #3968c4;
    --accent-dim:   rgba(74,124,219,0.09);
    --danger:       #dc2626;
    --success:      #16a34a;
    --warning:      #ca8a04;
    --purple:       #7c3aed;
    --purple-dim:   rgba(124,58,237,0.08);

    --text-on-color:   #fff;
    --text-on-warning: #000;

    --accent-light:  #2563eb;
    --danger-light:  #dc2626;
    --success-light: #16a34a;
    --warning-light: #ca8a04;

    --danger-dim:    rgba(220,38,38,0.09);
    --success-dim:   rgba(22,163,74,0.09);
    --warning-dim:   rgba(202,138,4,0.09);

    --bg-primary:    #f7f7fa;
    --bg-secondary:  #ecedf2;
    --overlay:       rgba(0,0,0,0.25);
    --glass:         rgba(0,0,0,0.02);
    --input-bg:      #f2f3f6;
    --user-bubble:   rgba(74,124,219,0.06);
    --danger-bg:     #fef2f2;
    --bg-code:       #f0f0f2;
    --shadow-lg:     0 8px 32px rgba(0,0,0,0.1);

    color-scheme: light;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--text); overflow: hidden; font-size: 14px; }

/* Global scrollbar styling */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--accent-dim); }