/* ===================================
   ETEC Website Color Constants - Orange Theme
   ===================================

   Eurasian Technical and Economic College
   Corporate Orange Color Palette

   Primary colors based on logo: #F28B30
*/

:root {
    /* ===== ОСНОВНЫЕ ЦВЕТА БРЕНДА - ORANGE ===== */
    --color-primary: #F28B30;           /* ETEC оранжевый (основной из логотипа) */
    --color-primary-light: #F5A050;     /* Светлый оранжевый */
    --color-primary-dark: #E07020;      /* Темный оранжевый */

    --color-secondary: #2D3748;         /* Темно-серый (для контраста) */
    --color-secondary-light: #4A5568;   /* Светлый серый */
    --color-secondary-dark: #1A202C;    /* Очень темный серый */

    --color-accent: #FFFFFF;            /* Белый акцент */
    --color-accent-light: #F7FAFC;      /* Очень светлый */
    --color-accent-dark: #EDF2F7;       /* Светло-серый */

    /* ===== ДОПОЛНИТЕЛЬНЫЕ ОРАНЖЕВЫЕ ОТТЕНКИ ===== */
    --color-orange-50: #FFF7ED;
    --color-orange-100: #FFEDD5;
    --color-orange-200: #FED7AA;
    --color-orange-300: #FDBA74;
    --color-orange-400: #FB923C;
    --color-orange-500: #F28B30;         /* Main brand color */
    --color-orange-600: #EA580C;
    --color-orange-700: #C2410C;
    --color-orange-800: #9A3412;
    --color-orange-900: #7C2D12;

    /* ===== ДОПОЛНИТЕЛЬНЫЕ ЦВЕТА ===== */
    --color-success: #10B981;           /* Зеленый для успеха */
    --color-success-light: #34D399;     /* Светлый зеленый */
    --color-success-dark: #059669;      /* Темно-зеленый */

    --color-warning: #F59E0B;           /* Желтый предупреждение */
    --color-warning-light: #FBBF24;     /* Светлый желтый */
    --color-warning-dark: #D97706;      /* Темный желтый */

    --color-error: #EF4444;             /* Красный ошибка */
    --color-error-light: #F87171;       /* Светлый красный */
    --color-error-dark: #DC2626;        /* Темный красный */

    --color-info: #3B82F6;              /* Синий информация */
    --color-info-light: #60A5FA;        /* Светлый синий */
    --color-info-dark: #2563EB;         /* Темный синий */

    /* ===== НЕЙТРАЛЬНЫЕ ЦВЕТА ===== */
    --color-white: #FFFFFF;             /* Белый */
    --color-black: #000000;             /* Черный */

    --color-gray-50: #F9FAFB;           /* Очень светлый серый */
    --color-gray-100: #F3F4F6;          /* Светлый серый */
    --color-gray-200: #E5E7EB;          /* Серый 200 */
    --color-gray-300: #D1D5DB;          /* Серый 300 */
    --color-gray-400: #9CA3AF;          /* Серый 400 */
    --color-gray-500: #6B7280;          /* Серый 500 */
    --color-gray-600: #4B5563;          /* Серый 600 */
    --color-gray-700: #374151;          /* Серый 700 */
    --color-gray-800: #1F2937;          /* Серый 800 */
    --color-gray-900: #111827;          /* Темный серый */

    /* ===== ЦВЕТА С ПРОЗРАЧНОСТЬЮ ===== */
    --color-primary-10: rgba(242, 139, 48, 0.1);    /* Оранжевый 10% */
    --color-primary-20: rgba(242, 139, 48, 0.2);    /* Оранжевый 20% */
    --color-primary-30: rgba(242, 139, 48, 0.3);    /* Оранжевый 30% */
    --color-primary-50: rgba(242, 139, 48, 0.5);    /* Оранжевый 50% */
    --color-primary-80: rgba(242, 139, 48, 0.8);    /* Оранжевый 80% */

    --color-white-10: rgba(255, 255, 255, 0.1);    /* Белый 10% */
    --color-white-20: rgba(255, 255, 255, 0.2);    /* Белый 20% */
    --color-white-30: rgba(255, 255, 255, 0.3);    /* Белый 30% */
    --color-white-50: rgba(255, 255, 255, 0.5);    /* Белый 50% */
    --color-white-80: rgba(255, 255, 255, 0.8);    /* Белый 80% */

    --color-black-10: rgba(0, 0, 0, 0.1);          /* Черный 10% */
    --color-black-20: rgba(0, 0, 0, 0.2);          /* Черный 20% */
    --color-black-30: rgba(0, 0, 0, 0.3);          /* Черный 30% */
    --color-black-50: rgba(0, 0, 0, 0.5);          /* Черный 50% */
    --color-black-80: rgba(0, 0, 0, 0.8);          /* Черный 80% */

    /* ===== ГРАДИЕНТЫ ===== */
    --gradient-primary: linear-gradient(135deg, #F28B30 0%, #E07020 100%);
    --gradient-primary-light: linear-gradient(135deg, #F5A050 0%, #F28B30 100%);
    --gradient-primary-dark: linear-gradient(135deg, #E07020 0%, #C2410C 100%);

    --gradient-hero: linear-gradient(135deg, #F28B30 0%, #E07020 50%, #C2410C 100%);
    --gradient-hero-warm: linear-gradient(135deg, #F5A050 0%, #F28B30 50%, #E07020 100%);

    --gradient-card: linear-gradient(135deg, var(--color-white-10) 0%, var(--color-white-20) 100%);
    --gradient-overlay: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.6));

    /* ===== ТЕНИ ===== */
    --shadow-sm: 0 1px 2px 0 var(--color-black-10);
    --shadow-md: 0 4px 6px -1px var(--color-black-10), 0 2px 4px -1px var(--color-black-10);
    --shadow-lg: 0 10px 15px -3px var(--color-black-10), 0 4px 6px -2px var(--color-black-10);
    --shadow-xl: 0 20px 25px -5px var(--color-black-10), 0 10px 10px -5px var(--color-black-10);
    --shadow-2xl: 0 25px 50px -12px var(--color-black-30);
    --shadow-orange: 0 4px 14px 0 rgba(242, 139, 48, 0.4);
    --shadow-orange-lg: 0 10px 25px 0 rgba(242, 139, 48, 0.35);

    /* ===== ЦВЕТА ТЕКСТА ===== */
    --text-primary: var(--color-white);             /* Основной текст на темном фоне */
    --text-secondary: var(--color-gray-300);        /* Вторичный текст на темном фоне */
    --text-muted: var(--color-gray-400);            /* Приглушенный текст */
    --text-inverse: var(--color-gray-900);          /* Текст на светлом фоне */
    --text-accent: var(--color-primary);            /* Акцентный текст (оранжевый) */

    /* ===== ЦВЕТА ФОНА ===== */
    --bg-primary: var(--color-primary);             /* Основной фон (оранжевый) */
    --bg-secondary: var(--color-secondary);         /* Вторичный фон (темно-серый) */
    --bg-accent: var(--color-accent);               /* Акцентный фон (белый) */
    --bg-surface: var(--color-white-10);            /* Поверхность на темном фоне */
    --bg-card: var(--color-white);                  /* Фон карточек */
    --bg-modal: var(--color-white);                 /* Фон модальных окон */

    /* ===== ЦВЕТА ГРАНИЦ ===== */
    --border-primary: var(--color-primary-20);      /* Основные границы */
    --border-secondary: var(--color-gray-300);      /* Вторичные границы */
    --border-accent: var(--color-primary);          /* Акцентные границы (оранжевый) */
    --border-muted: var(--color-gray-200);          /* Приглушенные границы */

    /* ===== ЦВЕТА КНОПОК ===== */
    --btn-primary-bg: var(--color-primary);         /* Фон основной кнопки */
    --btn-primary-hover: var(--color-primary-dark); /* Hover основной кнопки */
    --btn-primary-text: var(--color-white);         /* Текст основной кнопки */

    --btn-secondary-bg: var(--color-secondary);     /* Фон вторичной кнопки */
    --btn-secondary-hover: var(--color-secondary-dark); /* Hover вторичной кнопки */
    --btn-secondary-text: var(--color-white);       /* Текст вторичной кнопки */

    --btn-outline-border: var(--color-primary);     /* Граница outline кнопки */
    --btn-outline-text: var(--color-primary);       /* Текст outline кнопки */
    --btn-outline-hover-bg: var(--color-primary);   /* Hover фон outline кнопки */
    --btn-outline-hover-text: var(--color-white);   /* Hover текст outline кнопки */

    /* ===== ЦВЕТА ФОРМ ===== */
    --input-bg: var(--color-white);                 /* Фон полей ввода */
    --input-border: var(--color-gray-300);          /* Граница полей ввода */
    --input-focus: var(--color-primary);            /* Цвет фокуса полей ввода */
    --input-text: var(--color-gray-900);            /* Текст в полях ввода */
    --input-placeholder: var(--color-gray-500);     /* Placeholder в полях ввода */

    /* ===== ЦВЕТА СОСТОЯНИЙ ===== */
    --state-hover: var(--color-primary-10);         /* Hover состояние */
    --state-active: var(--color-primary-20);        /* Active состояние */
    --state-focus: var(--color-primary);            /* Focus состояние */
    --state-disabled: var(--color-gray-400);        /* Disabled состояние */

    /* ===== СПЕЦИАЛЬНЫЕ ЦВЕТА ===== */
    --color-facebook: #1877F2;                      /* Facebook */
    --color-instagram: #E1306C;                     /* Instagram */
    --color-youtube: #FF0000;                       /* YouTube */
    --color-twitter: #1DA1F2;                       /* Twitter */
    --color-linkedin: #0077B5;                      /* LinkedIn */
    --color-whatsapp: #25D366;                      /* WhatsApp */
    --color-telegram: #0088CC;                      /* Telegram */
}

/* ===== ТЕМНАЯ ТЕМА ===== */
[data-theme="dark"] {
    --text-primary: var(--color-white);
    --text-secondary: var(--color-gray-300);
    --text-inverse: var(--color-gray-100);
    --bg-primary: var(--color-gray-900);
    --bg-secondary: var(--color-gray-800);
    --bg-surface: var(--color-gray-800);
    --bg-card: var(--color-gray-800);
    --border-primary: var(--color-gray-700);
    --border-secondary: var(--color-gray-600);
}

/* ===== СВЕТЛАЯ ТЕМА ===== */
[data-theme="light"] {
    --text-primary: var(--color-gray-900);
    --text-secondary: var(--color-gray-600);
    --text-inverse: var(--color-white);
    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-gray-50);
    --bg-surface: var(--color-white);
    --bg-card: var(--color-white);
    --border-primary: var(--color-gray-200);
    --border-secondary: var(--color-gray-300);
}

/* ===== УТИЛИТАРНЫЕ КЛАССЫ ===== */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-accent { color: var(--text-accent) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-orange { color: var(--color-primary) !important; }

.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-accent { background-color: var(--bg-accent) !important; }
.bg-surface { background-color: var(--bg-surface) !important; }
.bg-orange { background-color: var(--color-primary) !important; }
.bg-orange-light { background-color: var(--color-primary-light) !important; }
.bg-orange-dark { background-color: var(--color-primary-dark) !important; }

.border-primary { border-color: var(--border-primary) !important; }
.border-secondary { border-color: var(--border-secondary) !important; }
.border-accent { border-color: var(--border-accent) !important; }
.border-orange { border-color: var(--color-primary) !important; }

.gradient-primary { background: var(--gradient-primary) !important; }
.gradient-hero { background: var(--gradient-hero) !important; }
.gradient-hero-warm { background: var(--gradient-hero-warm) !important; }

.shadow-orange { box-shadow: var(--shadow-orange) !important; }
.shadow-orange-lg { box-shadow: var(--shadow-orange-lg) !important; }