/* Централизованная система цветов для учебного центра "Что делать Квалификация" */

:root {
    /* ===== ОСНОВНАЯ ПАЛИТРА СОГЛАСНО ТЗ ===== */
    
    /* Основные цвета */
    --color-primary: #32770A;        /* Зеленый - логотип, кнопки, стрелки, выделенный текст */
    --color-secondary: #99354B;      /* Бордовый - кнопки, шильдики */
    --color-success: #32770A;        /* Успех = зеленый */
    --color-error: #99354B;          /* Ошибка = бордовый */
    --color-warning: #FFC107;        /* Предупреждение - желтый */
    --color-info: #2B5CE6;           /* Информация - синий */
    --color-purple: #8B5CF6;         /* Фиолетовый */
    --color-orange: #FF8C00;         /* Оранжевый */
    --color-burgundy: #99354B;       /* Бордовый (алиас для secondary) */
    
    /* Базовые цвета */
    --color-white: #FFFFFF;          /* Белый - фон плашек, текст на баннере, кнопки */
    --color-cream: #FAF8F6;          /* Кремовый - фон страниц */
    
    /* ===== ФОНЫ СОГЛАСНО ТЗ ===== */
    
    --color-bg-pages: #FAF8F6;       /* Фон страниц */
    --color-bg-secondary: #FAF8F6;   /* Вторичный фон (алиас для pages) */
    --color-bg-plashka: #FFFFFF;     /* Фон плашек, текст на главном баннере и кнопок */
    --color-bg-green-shield: #EBEDE8; /* Фон зеленых шильдиков */
    --color-bg-burgundy-shield: #F3E9EB; /* Фон бордовых шильдиков */
    --color-bg-gray-shield: #E8E7E7; /* Шильдики №3 */
    --color-bg-blue-shield: #E8F4FD; /* Фон синих шильдиков */
    --color-bg-purple-shield: #F0E8FF; /* Фон фиолетовых шильдиков */
    --color-bg-event-card: #F9F8F8; /* Фон плашки с мероприятием */
    --color-bg-button-white: #F7FFF5;
    --color-bg-button-login: #DFEDE5;
    --color-bg-button-secondary: #E8F0E4;  
    
        /* ===== ТЕКСТ СОГЛАСНО ТЗ ===== */

    --color-text-main: #111111;      /* Основной цвет текста */
    --color-text-secondary: rgba(17, 17, 17, 0.8); /* Вторичный текст (алиас для plashka) */
    --color-text-plashka: rgba(17, 17, 17, 0.8); /* Текст в плашках, подзаголовки (80% от основного) */
    --color-text-green: #32770A;     /* Текст в зеленых шильдиках, выделенный текст */
    --color-text-burgundy: #99354B;  /* Текст в бордовых шильдиках */
    --color-text-blue: #2B5CE6;      /* Текст в синих шильдиках */
    --color-text-purple: #8B5CF6;    /* Текст в фиолетовых шильдиках */
    --color-text-gray: #858585;      /* Текст в серых шильдиках */
    --color-text-white: #FFFFFF;     /* Белый текст */
    
    /* ===== ГРАНИЦЫ ===== */
    
    --color-border: #e9ecef;         /* Основные границы */
    --color-border-light: #e9ecef;   /* Светлые границы */
    --color-border-green: #32770A;   /* Зеленые границы */
    --color-border-burgundy: #99354B; /* Бордовые границы */
    
    /* ===== СОСТОЯНИЯ ===== */
    
    --color-hover-green: #255509;    /* Наведение на зеленые элементы */
    --color-hover-burgundy: #7E2E40; /* Наведение на бордовые элементы */
    --color-hover-primary: #2a6508;  /* Наведение на основной цвет */
    
    /* ===== ГРАДИЕНТЫ ===== */
    
    --gradient-primary: linear-gradient(135deg, #32770A 0%, #2a6508 100%); /* Основной градиент */
    --gradient-secondary: linear-gradient(135deg, #99354B 0%, #7a2a3c 100%); /* Вторичный градиент */
    
    /* ===== ПРОЗРАЧНОСТИ ===== */
    
    --focus-green: rgba(50, 119, 10, 0.15);
    --focus-burgundy: rgba(153, 53, 75, 0.15);
    
    /* ===== СОВМЕСТИМОСТЬ СО СТАРЫМИ ПЕРЕМЕННЫМИ ===== */
    /* (приводим к новой палитре ТЗ) */
    
    --color-link: var(--color-primary);           /* Ссылки = зеленый */
    --color-link-hover: var(--color-hover-green); /* Наведение на ссылки */
    --color-hover: var(--color-bg-plashka);       /* Общее наведение = белый */
    --color-border-medium: var(--color-border-light); /* Средние границы = светлые */
    --color-border-dark: var(--color-border-light);   /* Темные границы = светлые */
    --color-border-focus: var(--color-primary);       /* Фокус = зеленый */
    --color-text-inverse: var(--color-text-white);    /* Инверсный текст = белый */
    
    /* Совместимость для старых коротких имен */
    --color-text: var(--color-text-main);        /* Короткое имя = основной текст */
    --color-bg: var(--color-bg-plashka);         /* Короткое имя = фон плашек */
    --color-border: var(--color-border-light);   /* Короткое имя = светлые границы */
    --color-danger: var(--color-secondary);      /* Опасность = бордовый */
    --color-error: var(--color-secondary);       /* Ошибка = бордовый */
    
    /* Совместимость для темной темы */
    --color-bg-tertiary: var(--color-bg-gray-shield); /* Третичный фон = серые шильдики */
    --color-gray-50: var(--color-bg-event-card);       /* Серый 50 = фон карточек мероприятий */
    --color-gray-100: var(--color-bg-gray-shield);     /* Серый 100 = серые шильдики */
    --color-gray-200: var(--color-bg-gray-shield);     /* Серый 200 = серые шильдики */
    --color-gray-300: var(--color-text-gray);          /* Серый 300 = серый текст */
    --color-gray-400: var(--color-text-gray);          /* Серый 400 = серый текст */
    --color-gray-500: var(--color-text-gray);          /* Серый 500 = серый текст */
    --color-gray-600: var(--color-text-gray);          /* Серый 600 = серый текст */
    --color-gray-700: var(--color-text-main);          /* Серый 700 = основной текст */
    
    /* ===== ЦВЕТА ДЛЯ СТРАНИЦЫ СОГЛАСИЯ ===== */
    
    --color-privacy-list-bg: #F0F4EE;                  /* Фон элементов списка в таблицах */
    --color-privacy-link-bg: rgba(50, 119, 10, 0.1);   /* Фон ссылок в таблицах */
    
    /* ===== ТЕНИ ===== */
    
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);        /* Малая тень */
    --shadow-md: 0 5px 15px rgba(0, 0, 0, 0.1);       /* Средняя тень */
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);     /* Большая тень */
}

/* ===== УТИЛИТАРНЫЕ КЛАССЫ ===== */

/* Цвета текста */
.text-main { color: var(--color-text-main); }
.text-main-alpha { color: var(--color-text-main-alpha); }
.text-plashka { color: var(--color-text-plashka); }
.text-green { color: var(--color-text-green); }
.text-burgundy { color: var(--color-text-burgundy); }
.text-gray { color: var(--color-text-gray); }
.text-white { color: var(--color-text-white); }

/* Цвета фона */
.bg-pages { background-color: var(--color-bg-pages); }
.bg-plashka { background-color: var(--color-bg-plashka); }
.bg-green { background-color: var(--color-primary); }
.bg-burgundy { background-color: var(--color-secondary); }
.bg-green-shield { background-color: var(--color-bg-green-shield); }
.bg-burgundy-shield { background-color: var(--color-bg-burgundy-shield); }
.bg-gray-shield { background-color: var(--color-bg-gray-shield); }
.bg-event-card { background-color: var(--color-bg-event-card); }
.bg-white { background-color: var(--color-white); }
.bg-cream { background-color: var(--color-cream); }

/* Границы */
.border-light { border: 1px solid var(--color-border-light); }
.border-green { border: 1px solid var(--color-border-green); }
.border-burgundy { border: 1px solid var(--color-border-burgundy); }

/* Состояния наведения */
.hover-green:hover { background-color: var(--color-hover-green); }
.hover-burgundy:hover { background-color: var(--color-hover-burgundy); }

/* Состояния фокуса */
.focus-green:focus { 
    outline: none;
}

.focus-burgundy:focus { 
    outline: none;
}

/* Акцентный текст */
.text-accent {
    color: var(--color-text-green);
}

.text-accent-burgundy {
    color: var(--color-text-burgundy);
}

/* ===== ДОПОЛНИТЕЛЬНЫЕ ПЕРЕМЕННЫЕ ===== */

/* Оверлеи для модальных окон */
:root {
    --overlay-light: rgba(0, 0, 0, 0.1);
    --overlay-medium: rgba(0, 0, 0, 0.5);
    --overlay-dark: rgba(0, 0, 0, 0.8);
    
    /* Тени */
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.2);

    /* Фильтры для перекраски внешних SVG под фирменные цвета */
    /* Эквивалент цвета var(--color-secondary) */
    --filter-burgundy: brightness(0) saturate(100%) invert(15%) sepia(88%) saturate(1900%) hue-rotate(338deg) brightness(100%) contrast(100%);
    /* Эквивалент цвета var(--color-hover-burgundy) */
    --filter-burgundy-hover: brightness(0) saturate(100%) invert(13%) sepia(21%) saturate(2715%) hue-rotate(322deg) brightness(100%) contrast(100%);
}