/* Vexar.Chat — Unified Design System (Theme Variables)
 * Source of truth: vexar-operator/assets/css/main.css
 * Supports: Light / Dark / System themes
 */

:root, [data-theme="light"] {
    /* ── Primary ── */
    --primary: #3390EC;
    --primary-dark: #2B7FD5;
    --primary-light: rgba(51,144,236,0.08);
    --green: #4CAF50;
    --green-light: #E8F5E9;
    --red: #E53935;
    --red-light: #FFEBEE;
    --amber: #FF9800;
    --amber-light: #FFF8E1;

    /* Gray scale */
    --gray-50: #F8F9FA;
    --gray-100: #F0F1F3;
    --gray-200: #E3E4E5;
    --gray-300: #C8CACC;
    --gray-400: #9EA0A3;
    --gray-500: #707579;
    --gray-600: #5A5C5F;
    --gray-700: #3A3C3E;
    --gray-800: #232323;

    /* Layout */
    --nav-bg: #FFFFFF;
    --nav-width: 260px;
    --nav-mini: 68px;
    --bg: #F4F4F5;
    --bg-surface: #FFFFFF;
    --bg-chat: #E6EBEE;
    --radius: 10px;
    --radius-sm: 6px;

    /* Nav */
    --nav-text: #707579;
    --nav-text-hover: #232323;
    --nav-text-active: #3390EC;
    --nav-item-hover: rgba(0,0,0,0.04);
    --nav-item-active: rgba(51,144,236,0.08);
    --nav-border: #E3E4E5;
    --nav-divider: rgba(0,0,0,0.06);
    --nav-shadow: 1px 0 0 #E3E4E5;

    /* Text */
    --text: #232323;
    --text-secondary: #707579;
    --text-muted: #9EA0A3;
    --border: #E3E4E5;
    --border-light: #EEEFF0;

    /* Messages */
    --msg-visitor-bg: #3390EC;
    --msg-visitor-text: #FFFFFF;
    --msg-operator-bg: #EEFFDE;
    --msg-operator-text: #232323;
    --msg-operator-border: #D6EEC8;
    --msg-bot-bg: #F0F1F3;
    --msg-bot-text: #707579;
    --msg-system-bg: rgba(51,144,236,0.08);
    --msg-system-text: #3390EC;
    --msg-note-bg: #FFF8E1;
    --msg-note-border: #FFE082;
    --msg-note-text: #92400e;

    /* Input */
    --input-bg: #FFFFFF;
    --input-border: #E3E4E5;
    --input-focus: #3390EC;

    /* Cards */
    --card-shadow: 0 1px 2px rgba(0,0,0,0.06);

    /* Scrollbar */
    --scrollbar-thumb: #C8CACC;
    --scrollbar-hover: #9EA0A3;

    /* Toast */
    --toast-bg: #232323;
}

/* ── Dark Theme ── */
[data-theme="dark"] {
    --primary: #5288C1;
    --primary-dark: #4A79AB;
    --primary-light: rgba(82,136,193,0.15);
    --green: #5DB25D;
    --green-light: rgba(76,175,80,0.15);
    --red: #E53935;
    --red-light: rgba(229,57,53,0.12);
    --amber: #FF9800;
    --amber-light: rgba(255,152,0,0.12);

    --gray-50: #1B2733;
    --gray-100: #1F2F3F;
    --gray-200: #293A4A;
    --gray-300: #344152;
    --gray-400: #546778;
    --gray-500: #6C7883;
    --gray-600: #8B959E;
    --gray-700: #B0B7BE;
    --gray-800: #F5F5F5;

    --nav-bg: #17212B;
    --bg: #0E1621;
    --bg-surface: #17212B;
    --bg-chat: #0E1621;

    --nav-text: #6C7883;
    --nav-text-hover: #F5F5F5;
    --nav-text-active: #5288C1;
    --nav-item-hover: rgba(255,255,255,0.06);
    --nav-item-active: rgba(82,136,193,0.2);
    --nav-border: #101B26;
    --nav-divider: rgba(255,255,255,0.06);
    --nav-shadow: 1px 0 0 #101B26;

    --text: #F5F5F5;
    --text-secondary: #6C7883;
    --text-muted: #546778;
    --border: #1F2F3F;
    --border-light: #1B2733;

    --msg-visitor-bg: #2B5278;
    --msg-visitor-text: #E8F4FF;
    --msg-operator-bg: #1E3A2A;
    --msg-operator-text: #C3E8C3;
    --msg-operator-border: rgba(82,160,100,0.3);
    --msg-bot-bg: #1A2535;
    --msg-bot-text: #6C7883;
    --msg-system-bg: rgba(82,136,193,0.1);
    --msg-system-text: #5288C1;
    --msg-note-bg: rgba(255,152,0,0.08);
    --msg-note-border: rgba(255,152,0,0.2);
    --msg-note-text: #FFB74D;

    --input-bg: #242F3D;
    --input-border: #344152;
    --input-focus: #5288C1;

    --card-shadow: 0 1px 2px rgba(0,0,0,0.2);

    --scrollbar-thumb: #344152;
    --scrollbar-hover: #546778;

    --toast-bg: #232E3C;
}

/* ── System Theme (follows OS) ── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --primary: #5288C1;
        --primary-dark: #4A79AB;
        --primary-light: rgba(82,136,193,0.15);
        --green: #5DB25D;
        --green-light: rgba(76,175,80,0.15);
        --red: #E53935;
        --red-light: rgba(229,57,53,0.12);
        --amber: #FF9800;
        --amber-light: rgba(255,152,0,0.12);
        --gray-50: #1B2733;
        --gray-100: #1F2F3F;
        --gray-200: #293A4A;
        --gray-300: #344152;
        --gray-400: #546778;
        --gray-500: #6C7883;
        --gray-600: #8B959E;
        --gray-700: #B0B7BE;
        --gray-800: #F5F5F5;
        --nav-bg: #17212B;
        --bg: #0E1621;
        --bg-surface: #17212B;
        --bg-chat: #0E1621;
        --nav-text: #6C7883;
        --nav-text-hover: #F5F5F5;
        --nav-text-active: #5288C1;
        --nav-item-hover: rgba(255,255,255,0.06);
        --nav-item-active: rgba(82,136,193,0.2);
        --nav-border: #101B26;
        --nav-divider: rgba(255,255,255,0.06);
        --nav-shadow: 1px 0 0 #101B26;
        --text: #F5F5F5;
        --text-secondary: #6C7883;
        --text-muted: #546778;
        --border: #1F2F3F;
        --border-light: #1B2733;
        --msg-visitor-bg: #2B5278;
        --msg-visitor-text: #E8F4FF;
        --msg-operator-bg: #1E3A2A;
        --msg-operator-text: #C3E8C3;
        --msg-operator-border: rgba(82,160,100,0.3);
        --msg-bot-bg: #1A2535;
        --msg-bot-text: #6C7883;
        --msg-system-bg: rgba(82,136,193,0.1);
        --msg-system-text: #5288C1;
        --msg-note-bg: rgba(255,152,0,0.08);
        --msg-note-border: rgba(255,152,0,0.2);
        --msg-note-text: #FFB74D;
        --input-bg: #242F3D;
        --input-border: #344152;
        --input-focus: #5288C1;
        --card-shadow: 0 1px 2px rgba(0,0,0,0.2);
        --scrollbar-thumb: #344152;
        --scrollbar-hover: #546778;
        --toast-bg: #232E3C;
    }
}