/* ===================================
   META UNIVERSITY Website Color Constants
   ===================================
   
   Этот файл содержит все цветовые константы сайта.
   Для изменения цветовой схемы редактируйте только этот файл.
*/

:root {
    /* ===== ОСНОВНЫЕ ЦВЕТА БРЕНДА ===== */
    --color-primary: #C41E3A;           /* META красный (основной) */
    --color-primary-light: #E53E3E;     /* Светлый META красный */
    --color-primary-dark: #8B0000;      /* Темный META красный */
    
    --color-secondary: #8B4513;         /* Коричневый седловой (гармонирует с красным) */
    --color-secondary-light: #CD853F;   /* Перуанский коричневый светлый */
    --color-secondary-dark: #654321;    /* Темно-коричневый */
    
    --color-accent: #F4A261;            /* Теплый оранжевый */
    --color-accent-light: #F4A261;      /* Персиковый */
    --color-accent-dark: #E76F51;       /* Коралловый */
    
    /* ===== ДОПОЛНИТЕЛЬНЫЕ ЦВЕТА ===== */
    --color-success: #228B22;           /* Лесной зеленый (для успеха) */
    --color-success-light: #32CD32;     /* Лайм зеленый светлый */
    --color-success-dark: #006400;      /* Темно-зеленый */
    
    --color-warning: #F4A261;           /* Теплый оранжевый предупреждение */
    --color-warning-light: #FFB84D;     /* Светлый оранжевый */
    --color-warning-dark: #E76F51;      /* Темный оранжевый */
    
    --color-error: #C41E3A;             /* META красный ошибка */
    --color-error-light: #E53E3E;       /* Светлый красный */
    --color-error-dark: #8B0000;        /* Темный красный */
    
    --color-info: #6B5B73;              /* Мягкий фиолетово-серый информация */
    --color-info-light: #8E7CC3;        /* Светлый лавандовый */
    --color-info-dark: #4A4458;         /* Темный серо-фиолетовый */
    
    /* ===== ДОПОЛНИТЕЛЬНЫЕ ГАРМОНИЧНЫЕ ЦВЕТА ===== */
    --color-cream: #F8F4E6;             /* Кремовый (теплый нейтральный) */
    --color-beige: #F5E6D3;             /* Бежевый */
    --color-sage: #BC9A6A;              /* Песочно-коричневый */
    --color-terracotta: #D2691E;        /* Терракотовый */
    --color-burgundy: #800020;          /* Бургундский */
    --color-champagne: #F7E7CE;         /* Шампанское */
    
    /* ===== НЕЙТРАЛЬНЫЕ ЦВЕТА ===== */
    --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(196, 30, 58, 0.1);    /* META красный 10% */
    --color-primary-20: rgba(196, 30, 58, 0.2);    /* META красный 20% */
    --color-primary-30: rgba(196, 30, 58, 0.3);    /* META красный 30% */
    --color-primary-50: rgba(196, 30, 58, 0.5);    /* META красный 50% */
    --color-primary-80: rgba(196, 30, 58, 0.8);    /* META красный 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, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    --gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
    
    --gradient-hero: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 50%, var(--color-primary-dark) 100%);
    --gradient-card: linear-gradient(135deg, var(--color-white-10) 0%, var(--color-white-20) 100%);
    
    /* ===== ТЕНИ ===== */
    --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);
    
    /* ===== ЦВЕТА ТЕКСТА ===== */
    --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-accent);             /* Акцентный текст */
    
    /* ===== ЦВЕТА ФОНА ===== */
    --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-10);               /* Фон карточек */
    --bg-modal: var(--color-white);                 /* Фон модальных окон */
    
    /* ===== ЦВЕТА ГРАНИЦ ===== */
    --border-primary: var(--color-white-20);        /* Основные границы */
    --border-secondary: var(--color-gray-300);      /* Вторичные границы */
    --border-accent: var(--color-accent);           /* Акцентные границы */
    --border-muted: var(--color-gray-200);          /* Приглушенные границы */
    
    /* ===== ЦВЕТА КНОПОК ===== */
    --btn-primary-bg: var(--color-secondary);       /* Фон основной кнопки */
    --btn-primary-hover: var(--color-secondary-dark); /* Hover основной кнопки */
    --btn-primary-text: var(--color-white);         /* Текст основной кнопки */
    
    --btn-secondary-bg: var(--color-accent);        /* Фон вторичной кнопки */
    --btn-secondary-hover: var(--color-accent-dark); /* Hover вторичной кнопки */
    --btn-secondary-text: var(--color-white);       /* Текст вторичной кнопки */
    
    --btn-outline-border: var(--color-white);       /* Граница outline кнопки */
    --btn-outline-text: var(--color-white);         /* Текст outline кнопки */
    --btn-outline-hover-bg: var(--color-white);     /* Hover фон outline кнопки */
    --btn-outline-hover-text: var(--color-primary); /* Hover текст outline кнопки */
    
    /* ===== ЦВЕТА ФОРМ ===== */
    --input-bg: var(--color-white);                 /* Фон полей ввода */
    --input-border: var(--color-gray-300);          /* Граница полей ввода */
    --input-focus: var(--color-secondary);          /* Цвет фокуса полей ввода */
    --input-text: var(--color-gray-900);            /* Текст в полях ввода */
    --input-placeholder: var(--color-gray-500);     /* Placeholder в полях ввода */
    
    /* ===== ЦВЕТА СОСТОЯНИЙ ===== */
    --state-hover: var(--color-white-10);           /* Hover состояние */
    --state-active: var(--color-white-20);          /* Active состояние */
    --state-focus: var(--color-accent);             /* 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 */
}

/* ===== ТЕМНАЯ ТЕМА (опционально) ===== */
[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; }

.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; }

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

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