/* =============================================================
   TOKENS / COLORS
   
   Три уровня абстракции:
   1. Палитра    — сырые цвета (--gray-50, --red-500...)
   2. Семантика  — назначение (--bg-surface, --text-primary...)
   3. Статусы    — смысл (--status-success...)
   
   Никогда не используй палитру напрямую в компонентах.
   Только семантику и статусы.
   ============================================================= */

:root {

    /* ---------------------------------------------------------
     УРОВЕНЬ 1: ПАЛИТРА
     --------------------------------------------------------- */

    /* Ахроматика (серые) — числовая шкала от 50 до 900 */
    --gray-0: hsl(0 0% 100%);
    /* #ffffff — чистый белый */
    --gray-50: hsl(0 0% 96%);
    /* #f5f5f5 */
    --gray-100: hsl(0 0% 92%);
    /* #ebebeb */
    --gray-200: hsl(0 0% 85%);
    /* #d9d9d9 */
    --gray-500: hsl(0 0% 43%);
    /* #6e6e73 */
    --gray-900: hsl(0 0% 11%);
    /* #1c1c1c */

    /* Оттенки — через hue-переменные */
    --hue-neutral: 0;
    --hue-red: 340;
    --hue-orange: 25;
    --hue-yellow: 45;
    --hue-green: 145;
    --hue-blue: 210;
    --hue-purple: 270;
    --hue-teal: 185;

    /* Каждый цвет — 5 уровней яркости */
    --neutral-100: hsl(var(--hue-neutral) 0% 94%);
    --neutral-300: hsl(var(--hue-neutral) 0% 88%);
    --neutral-500: hsl(var(--hue-neutral) 0% 46%);
    --neutral-700: hsl(var(--hue-neutral) 0% 33%);
    --neutral-900: hsl(var(--hue-neutral) 0% 23%);

    --red-100: hsl(var(--hue-red) 75% 94%);
    --red-300: hsl(var(--hue-red) 75% 88%);
    --red-500: hsl(var(--hue-red) 75% 48%);
    --red-700: hsl(var(--hue-red) 75% 35%);
    --red-900: hsl(var(--hue-red) 75% 25%);

    --orange-100: hsl(var(--hue-orange) 85% 94%);
    --orange-300: hsl(var(--hue-orange) 85% 88%);
    --orange-500: hsl(var(--hue-orange) 85% 48%);
    --orange-700: hsl(var(--hue-orange) 85% 35%);
    --orange-900: hsl(var(--hue-orange) 85% 25%);

    --yellow-100: hsl(var(--hue-yellow) 85% 92%);
    --yellow-300: hsl(var(--hue-yellow) 85% 85%);
    --yellow-500: hsl(var(--hue-yellow) 85% 48%);
    --yellow-700: hsl(var(--hue-yellow) 85% 35%);
    --yellow-900: hsl(var(--hue-yellow) 85% 25%);

    --green-100: hsl(var(--hue-green) 70% 94%);
    --green-300: hsl(var(--hue-green) 70% 88%);
    --green-500: hsl(var(--hue-green) 70% 42%);
    --green-700: hsl(var(--hue-green) 70% 30%);
    --green-900: hsl(var(--hue-green) 70% 22%);

    --blue-100: hsl(var(--hue-blue) 75% 94%);
    --blue-300: hsl(var(--hue-blue) 75% 88%);
    --blue-500: hsl(var(--hue-blue) 75% 46%);
    --blue-700: hsl(var(--hue-blue) 75% 33%);
    --blue-900: hsl(var(--hue-blue) 75% 23%);

    --purple-100: hsl(var(--hue-purple) 70% 94%);
    --purple-300: hsl(var(--hue-purple) 70% 88%);
    --purple-500: hsl(var(--hue-purple) 70% 48%);
    --purple-700: hsl(var(--hue-purple) 70% 35%);
    --purple-900: hsl(var(--hue-purple) 70% 25%);

    --teal-100: hsl(var(--hue-teal) 65% 94%);
    --teal-300: hsl(var(--hue-teal) 65% 88%);
    --teal-500: hsl(var(--hue-teal) 65% 42%);
    --teal-700: hsl(var(--hue-teal) 65% 30%);
    --teal-900: hsl(var(--hue-teal) 65% 22%);

    /* Акцент бренда (бывший --bg-accent) */
    --brand: #cd1c31;

    /* ---------------------------------------------------------
     УРОВЕНЬ 2: СЕМАНТИКА
     --------------------------------------------------------- */

    /* Фоны */
    --bg-page: var(--gray-50);
    --bg-surface: var(--gray-0);
    --bg-surface-alt: var(--gray-50);
    --bg-elevated: var(--gray-0);

    /* Текст */
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-500);
    --text-tertiary: var(--gray-200);
    --text-disabled: var(--gray-100);

    /* Границы */
    --border-default: var(--gray-100);
    --border-light: var(--gray-50);
    --border-strong: var(--gray-200);

    /* ---------------------------------------------------------
     УРОВЕНЬ 3: СТАТУСЫ
     --------------------------------------------------------- */

    /* Успех */
    --status-success: var(--green-500);
    --status-success-bg: var(--green-100);
    --status-success-fg: var(--green-900);

    /* Ошибка / опасность */
    --status-danger: var(--red-500);
    --status-danger-bg: var(--red-100);
    --status-danger-fg: var(--red-900);

    /* Предупреждение */
    --status-warning: var(--orange-500);
    --status-warning-bg: var(--orange-100);
    --status-warning-fg: var(--orange-900);

    /* Внимание / ожидание */
    --status-attention: var(--yellow-500);
    --status-attention-bg: var(--yellow-100);
    --status-attention-fg: var(--yellow-900);

    /* Информация */
    --status-info: var(--blue-500);
    --status-info-bg: var(--blue-100);
    --status-info-fg: var(--blue-900);

    /* Премиум */
    --status-premium: var(--purple-500);
    --status-premium-bg: var(--purple-100);
    --status-premium-fg: var(--purple-900);

    /* Акция / рекомендация */
    --status-promo: var(--teal-500);
    --status-promo-bg: var(--teal-100);
    --status-promo-fg: var(--teal-900);

    /* Нейтральный статус */
    --status-neutral: var(--neutral-500);
    --status-neutral-bg: var(--neutral-100);
    --status-neutral-fg: var(--neutral-900);
}