/* ============================================
   THEME.CSS — ЦВЕТОВЫЕ ПЕРЕМЕННЫЕ И ТЕМЫ
   Premium edition • плотная сетка • гамма без изменений
   ============================================ */

:root {
    /* ---------- Брендовые цвета ---------- */
    --brand-orange:       #ef7d00;
    --brand-orange-dark:  #c86400;
    --brand-orange-light: #f6a658;
    --brand-orange-soft:  rgba(239, 125, 0, .10);
    --brand-blue:         #1976d2;
    --brand-blue-dark:    #0d47a1;
    --brand-blue-light:   #64b5f6;

    /* Оранжевый для ТЕКСТА — тот же тон, глубже (контраст ~5.4:1).
       --brand-orange остаётся для заливок, бордеров, акцентов. */
    --brand-orange-text:  #a34e00;

    /* Фирменный градиент — единый источник (был захардкожен в 5 местах) */
    --grad-brand:      linear-gradient(110deg, #df6d00, #ef7d00 45%, #ff9b31);
    --grad-brand-dark: linear-gradient(110deg, #b95020, #ef7d00);

    /* ---------- Базовые цвета ---------- */
    /* FIX: --white должен быть белым. Прежнее значение #04196e —
       тёмно-синий: оно делало невидимыми часы, текст кнопок
       и иконки в хедере (тёмное на тёмном в ОБОИХ темах).
       Если тёмно-синий нужен как акцент — используйте --navy. */
    --black: #312d2d;
    --white: #ffffff;
    --navy:  #04196e;

    /* Семантический алиас: текст/иконки на тёмных и брендовых
       поверхностях (хедер, часы, кнопки с градиентом, бейджи).
       По смыслу используйте --text-on-dark, а не --white. */
    --text-on-dark: #ffffff;

    /* ---------- Нейтральные ---------- */
    --gray-50:   #fafbfc;
    --gray-100:  #f6f7f9;
    --gray-200:  #eceef1;
    --gray-300:  #dcdfe3;
    --gray-400:  #c3c7cc;
    --gray-500:  #9aa0a6;
    --gray-600:  #7c8189;
    --gray-700:  #62666d;
    --gray-800:  #3a3d42;
    --gray-900:  #242529;

    /* ---------- Семантика (приглушённая, премиум) ---------- */
    --success: #ea7505;
    --success-bg:   rgba(53, 185, 111, .10);
    --success-text: #1e6b3d;

    --danger:       #d92d3a;
    --danger-bg:    rgba(220, 53, 69, .07);
    --danger-text:  #a52d3a;

    --warning:      #e8a317;
    --warning-bg:   rgba(239, 163, 23, .10);
    --warning-text: #7a5307;

    --info:         #1e88c7;

    /* ---------- Статусы (мягкие) ---------- */
    --status-new-bg:         #e7f0fd;
    --status-new-text:       #0d3d8a;
    --status-accepted-bg:    #e6f5ea;
    --status-accepted-text:  #0f5424;
    --status-rejected-bg:    #fdecef;
    --status-rejected-text:  #8f1826;
    --status-suspended-bg:   #fdf0df;
    --status-suspended-text: #8a4708;
    --status-completed-bg:   #e4f4f6;
    --status-completed-text: #055a63;
    --status-closed-bg:      #eef0f2;
    --status-closed-text:    #3f4347;
    --status-rework-bg:      #fceaf1;
    --status-rework-text:    #7d0f47;

    /* ---------- Структура ---------- */
    --sidebar-width:   232px;
    --header-height:   48px;
    --border-radius:   10px;
    --radius-sm:       8px;
    --radius-lg:       16px;
    --radius-pill:     999px;

    --transition-speed: .18s;
    --ease-out:    cubic-bezier(.22, .8, .26, .99);   /* фирменный easing */
    --ease-spring: cubic-bezier(.34, 1.35, .64, 1);   /* для появления модалок */

    /* z-index шкала вместо магических чисел */
    --z-map: 1000;
    --z-overlay: 1015;
    --z-sidebar: 1020;
    --z-header: 1030;
    --z-modal: 1050;

    --font-family: Verdana, sans-serif;

    /* ---------- Премиум-тени ---------- */
    --shadow-xs: 0 1px 2px rgba(44, 35, 25, .04);
    --shadow-sm: 0 2px 6px rgba(44, 35, 25, .05),
                 0 1px 2px rgba(44, 35, 25, .03);
    --shadow-md: 0 8px 24px rgba(44, 35, 25, .08),
                 0 2px 6px rgba(44, 35, 25, .04);
    --shadow-lg: 0 24px 60px rgba(44, 35, 25, .12),
                 0 4px 12px rgba(44, 35, 25, .06);
    --shadow-xl: 0 30px 80px rgba(44, 35, 25, .12);

    /* ---------- Волосяные линии ---------- */
    --hairline:        1px solid rgba(36, 39, 43, .08);
    --hairline-soft:   1px solid rgba(36, 39, 43, .06);
    --hairline-strong: 1px solid rgba(36, 39, 43, .12);

    /* ---------- Светлая тема (по умолчанию) ---------- */
    --bg-body:      #f7f9fc;
    --bg-header:    linear-gradient(135deg, #b95020 0%, #312d2d 100%);
    --bg-sidebar:   linear-gradient(180deg, #1a1a1c 0%, #0d0d0e 100%);
    --bg-card:      #ffffff;
    --bg-card-soft: rgba(255, 255, 255, .88);
    --bg-input:     rgba(248, 249, 251, .88);
    --bg-soft:      #f7f8fa;
    --bg-hover:     rgba(239, 125, 0, .06);

    --text-primary:   #242529;
    --text-secondary: #62666d;
    --text-muted: #101010;
    --text-sidebar:       #b7bbc1;
    --text-sidebar-hover: #f6a658;

    --border-color:   rgba(36, 39, 43, .10);
    --border-sidebar: rgba(255, 255, 255, .06);
    --hover-bg:       rgba(239, 125, 0, .06);
    --focus-ring:     0 0 0 4px rgba(239, 125, 0, .075);

    /* Стрелка селекта в цвете палитры (не системная) */
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2362666d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ============================================
   ТЁМНАЯ ТЕМА
   ============================================ */

body.dark-theme {
    --bg-body:      #131417;
    --bg-header:    linear-gradient(135deg, #1a1a1c 0%, #000000 100%);
    --bg-sidebar:   linear-gradient(180deg, #0a0a0b 0%, #050506 100%);
    --bg-card:      #1c1e22;
    --bg-card-soft: rgba(28, 30, 34, .88);
    --bg-input:     rgba(35, 37, 41, .88);
    --bg-soft:      #17181b;
    --bg-hover:     rgba(239, 125, 0, .10);

    --text-primary:   #e8eaed;
    --text-secondary: #9aa0a6;
    --text-muted: #f9f9fa;
    --text-sidebar:       #8d9298;
    --text-sidebar-hover: #f6a658;

    --border-color:   rgba(255, 255, 255, .08);
    --border-sidebar: rgba(255, 255, 255, .05);
    --hover-bg:       rgba(239, 125, 0, .10);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .30);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, .35),
                 0 1px 2px rgba(0, 0, 0, .25);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .40),
                 0 2px 6px rgba(0, 0, 0, .30);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55),
                 0 4px 12px rgba(0, 0, 0, .35);
    --shadow-xl: 0 30px 80px rgba(0, 0, 0, .60);

    --hairline:        1px solid rgba(255, 255, 255, .08);
    --hairline-soft:   1px solid rgba(255, 255, 255, .05);
    --hairline-strong: 1px solid rgba(255, 255, 255, .12);

    --focus-ring: 0 0 0 4px rgba(239, 125, 0, .18);

    --brand-orange-text: #f6a658;   /* светлый шаг для текста в тёмной теме */

    /* --white и --text-on-dark НЕ переопределяем намеренно:
       хедер, кнопки-градиенты и брендовые поверхности остаются
       тёмными в обеих темах — текст на них белый. */

    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

    --status-new-bg:         #122a52;
    --status-new-text:       #a9c9f7;
    --status-accepted-bg:    #123a20;
    --status-accepted-text:  #a3dcb0;
    --status-rejected-bg:    #3a1319;
    --status-rejected-text:  #f3a3ac;
    --status-suspended-bg:   #3a2810;
    --status-suspended-text: #f7c67e;
    --status-completed-bg:   #0f3038;
    --status-completed-text: #8bd1da;
    --status-closed-bg:      #232529;
    --status-closed-text:    #b7bbc1;
    --status-rework-bg:      #38152a;
    --status-rework-text:    #f2a3c9;
}