:root {
    /* ======================================================================
       ПАЛИТРА (светлая тема, фиолетовый акцент).
       Снята со скриншотов-референсов:
         фиолетовый #5226e5 · лавандовый #f4f5fd · тёмно-синий #1a1a3c · белый
       Ниже — смысловые (semantic) имена. Старые имена (--warm-gold,
       --pure-black и т.д.) оставлены как алиасы, чтобы весь существующий CSS
       продолжал работать без правок: меняется только значение.
       ====================================================================== */

    /* ---- Основа ---- */
    --color-bg: #ffffff;                 /* фон страницы */
    --color-surface: #f4f5fd;            /* карточки, блоки, вторичные кнопки */
    --color-surface-hover: #eeeafd;      /* hover вторичных кнопок — чуть фиолетовее */
    --color-border: #e3e5f6;             /* тонкие рамки и разделители */
    --color-line: rgba(82, 38, 229, 0.16);/* еле заметная фиолетовая линия (границы панелей) */
    --color-text: #1a1a3c;               /* основной текст и заголовки */
    --color-text-muted: #666889;         /* второстепенный текст */

    /* ---- Акцент бренда (фиолетовый) ---- */
    --color-accent: #5226e5;             /* кнопки, ссылки, акценты */
    --color-accent-hover: #5f34ea;       /* hover основных кнопок — чуть ярче */
    --color-accent-soft: #c9bdf7;        /* скроллбар и декоративные детали */
    --color-on-accent: #ffffff;          /* текст на фиолетовых кнопках */

    /* ---- Статусы ---- */
    --color-positive: #0f9d6b;           /* положительное значение / успех */
    --color-negative: #e0314d;           /* отрицательное значение / ошибка */

    /* ======================================================================
       ЛЕГАСИ-АЛИАСЫ (старые имена → новые значения)
       ====================================================================== */
    --pure-black: var(--color-bg);                     /* фон страницы */
    --midnight-navy: var(--color-bg);                  /* фон хедера и футера */
    --deep-navy: var(--color-surface);                 /* карточки, блоки контента */
    --deep-navy-translucent: rgba(244, 245, 253, 0.85);/* полупрозрачная подложка (таблицы) */
    --input-navy: var(--color-surface);                /* фон полей ввода */
    --border-navy: var(--color-border);                /* тонкие рамки и разделители */

    --off-white: var(--color-text);                    /* основной текст */
    --slate-blue-gray: var(--color-text-muted);        /* приглушённый текст */
    --ink-navy: var(--color-on-accent);                /* текст на акцентных кнопках */

    --warm-gold: var(--color-accent);                  /* основной акцентный цвет */
    --light-gold: var(--color-accent-hover);           /* hover-состояния кнопок */
    --dark-gold: var(--color-accent-soft);             /* скроллбар и декор */

    --emerald-green: var(--color-positive);
    --crimson-red: var(--color-negative);

    /* ---- Формы ---- */
    --radius-pill: 999px;                              /* кнопки и табы — «пилюля» */

    /* ---- Шрифты ----
       Один гротеск на всё (как на референсе: подписи-эйбрау тоже обычным
       шрифтом, а не моноширинным). --font-mono оставлен как алиас, чтобы
       не править старый CSS. */
    --font-main: 'Inter Tight', 'Reem Kufi', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: var(--font-main);
    --heading-tracking: -0.02em;                       /* плотный трекинг заголовков, как на референсе */
}