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

/* ── Self-hosted fonts (zero external dependencies) ── */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/dm-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================
   Armature
   Clean utility layout · Open WebUI inspired
   ========================================== */

:root {
    /* ── Core palette (Dark — default) ────────── */
    --bg:           #0e0e10;
    --bg-surface:   #18181b;
    --bg-raised:    #222227;
    --bg-hover:     #2a2a30;
    --bg-active:    #2f2f38;
    --bg-elevated:  #42424e;
    --border:       #2e2e35;
    --border-elevated: #555560;
    --border-light: #3a3a42;
    --text:         #e8e8ed;
    --text-2:       #9898a8;
    --text-3:       #6b6b7b;
    --accent:       #6493ed;
    --accent-hover: #7ca8f5;
    --accent-dim:   rgba(100,147,237,0.12);
    --danger:       #ef4444;
    --success:      #1dab51;
    --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(100,147,237,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-sm:    4px;
    --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;

    /* -- Spacing (4px grid + half-steps) ------- */
    --sp-1:  0.25rem;   /*  4px */
    --sp-1h: 0.375rem;  /*  6px */
    --sp-2:  0.5rem;    /*  8px */
    --sp-2h: 0.625rem;  /* 10px */
    --sp-3:  0.75rem;   /* 12px */
    --sp-4:  1rem;      /* 16px */
    --sp-5:  1.25rem;   /* 20px */
    --sp-6:  1.5rem;    /* 24px */
    --sp-8:  2rem;      /* 32px */
    --sp-10: 2.5rem;    /* 40px */
    --sp-12: 3rem;      /* 48px */

    /* -- Breakpoints --------------------------
       Mobile:  max-width: 768px
       Tablet:  max-width: 1024px
       Desktop: default (no query)
       ----------------------------------------- */

    /* 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-active:    #dddee5;
    --bg-elevated:  #ffffff;
    --border:       #d5d6dc;
    --border-elevated: #c0c0c8;
    --border-light: #c2c3cb;
    --text:         #1a1a2e;
    --text-2:       #555770;
    --text-3:       #787a92;
    --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: #128a3e;
    --warning-light: #a97200;

    --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: var(--radius-sm); }
::-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); }