/* =====================================================================
   WSCrm — дизайн-токены (цвета, размеры, тени).
   Подключается ПЕРВЫМ. Все цвета в style.css и ui.css берутся отсюда,
   поэтому тёмная тема — это просто другой набор значений ниже.
   ===================================================================== */

:root {
    color-scheme: light;

    /* Фон и поверхности */
    --bg:            #e9edf2;
    --surface:       #ffffff;
    --surface-2:     #f1f4f8;
    --surface-3:     #e1e6ed;
    --border:        #cdd5df;
    --border-strong: #a3afbf;

    /* Текст */
    --text:        #0f172a;
    --text-muted:  #3c4757;
    --text-faint:  #5f6b7c;
    --on-primary:  #ffffff;

    /* Бренд */
    --primary:        #178a55;
    --primary-hover:  #116f43;
    --primary-light:  #2ed99a;
    --primary-soft:   #dff2e8;
    --header-bg:      #26324d;
    --header-text:    #e8ecf3;
    --header-muted:   #a9b3c7;

    /* Смысловые цвета */
    --success:       #178a55;
    --success-hover: #116f43;
    --success-soft:  #dcf1e6;
    --success-text:  #11653d;
    --danger:        #c62828;
    --danger-hover:  #b92a2a;
    --danger-soft:   #fbe3e3;
    --danger-text:   #8f1f1f;
    --warning:       #b86e00;
    --warning-soft:  #fdefd0;
    --warning-text:  #7a4b00;
    --info:          #1f56b3;
    --info-hover:    #1d4fa3;
    --info-soft:     #e0eafb;
    --info-text:     #163f82;
    --neutral:       #5b6676;
    --neutral-hover: #555f6d;
    --purple-soft:   #f3e8f8;

    /* Тени, скругления, размеры */
    --shadow-color: rgba(15, 23, 42, 0.10);
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.07);
    --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.12);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.16);
    --radius-sm: 6px;
    --radius:    10px;
    --radius-lg: 14px;
    --focus-ring: 0 0 0 3px rgba(29, 159, 98, 0.25);

    --font: 'Montserrat', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --fs-base: 14px;
    --content-size: 1300px;

    /* ---- Совместимость со старыми названиями из style.css ---- */
    --cl-gray-light: var(--surface-2);
    --cl-gray:       var(--surface-2);
    --cl-green:      var(--primary);
    --cl-green-dark: var(--primary-hover);
    --cl-green-light: var(--primary-light);
    --cl-blue:       var(--info);
    --cl-red:        var(--danger);
    --cl-fon-gray:   var(--header-bg);
    --cl-login-fon:  var(--header-bg);
    --cl-login-placeholder: var(--text-faint);
    --bg-body:       var(--bg);
    --border-radius: var(--radius-sm);
}

/* ---------- Тёмная тема ---------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg:            #0f1522;
        --surface:       #182131;
        --surface-2:     #1d2839;
        --surface-3:     #263247;
        --border:        #2c384d;
        --border-strong: #42506a;
        --text:          #e3e8f0;
        --text-muted:    #a3aec0;
        --text-faint:    #7a879b;
        --primary:       #2bb673;
        --primary-hover: #36c983;
        --primary-soft:  rgba(43, 182, 115, 0.16);
        --header-bg:     #121a29;
        --success:       #2bb673;
        --success-hover: #36c983;
        --success-soft:  rgba(43, 182, 115, 0.16);
        --success-text:  #7fe0b0;
        --danger:        #f06464;
        --danger-hover:  #ff7b7b;
        --danger-soft:   rgba(240, 100, 100, 0.16);
        --danger-text:   #ffadad;
        --warning:       #f2a531;
        --warning-soft:  rgba(242, 165, 49, 0.16);
        --warning-text:  #ffd18a;
        --info:          #5b93ef;
        --info-hover:    #7aa8f3;
        --info-soft:     rgba(91, 147, 239, 0.16);
        --info-text:     #a9c8fa;
        --neutral:       #5d6878;
        --neutral-hover: #707c8e;
        --purple-soft:   rgba(171, 71, 188, 0.18);
        --shadow-color:  rgba(0, 0, 0, 0.45);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    }
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg:            #0f1522;
    --surface:       #182131;
    --surface-2:     #1d2839;
    --surface-3:     #263247;
    --border:        #2c384d;
    --border-strong: #42506a;
    --text:          #e3e8f0;
    --text-muted:    #a3aec0;
    --text-faint:    #7a879b;
    --primary:       #2bb673;
    --primary-hover: #36c983;
    --primary-soft:  rgba(43, 182, 115, 0.16);
    --header-bg:     #121a29;
    --success:       #2bb673;
    --success-hover: #36c983;
    --success-soft:  rgba(43, 182, 115, 0.16);
    --success-text:  #7fe0b0;
    --danger:        #f06464;
    --danger-hover:  #ff7b7b;
    --danger-soft:   rgba(240, 100, 100, 0.16);
    --danger-text:   #ffadad;
    --warning:       #f2a531;
    --warning-soft:  rgba(242, 165, 49, 0.16);
    --warning-text:  #ffd18a;
    --info:          #5b93ef;
    --info-hover:    #7aa8f3;
    --info-soft:     rgba(91, 147, 239, 0.16);
    --info-text:     #a9c8fa;
    --neutral:       #5d6878;
    --neutral-hover: #707c8e;
    --purple-soft:   rgba(171, 71, 188, 0.18);
    --shadow-color:  rgba(0, 0, 0, 0.45);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* Карточка «Баланс лицевого счёта» в ЛК */
:root {
    --lk-balance-bg: #e3e8ee;
    --lk-balance-text: #0f172a;
    --lk-balance-pos: #178a55;
    --lk-balance-neg: #c62828;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --lk-balance-bg: #26324d;
        --lk-balance-text: #e3e8f0;
        --lk-balance-pos: #7ee2ad;
        --lk-balance-neg: #ff8a80;
    }
}
:root[data-theme="dark"] {
    --lk-balance-bg: #26324d;
    --lk-balance-text: #e3e8f0;
    --lk-balance-pos: #7ee2ad;
    --lk-balance-neg: #ff8a80;
}