/* Hallmark · design-system: design.md · theme: studied-DNA (structure: Calendly image) · brand: CARreer
 * genre: modern-minimal · axes: light / geometric-sans / warm-red (logo #EE1F2A)
 * Единственный источник дизайн-токенов. Подключается ПЕРВЫМ <link>'ом на каждой
 * странице. Роли цветов: бренд-красный (логотип) = интерактивное/выбранное ·
 * зелёный = статус/успех · тёмный кармин = опасность (всегда с текстовой меткой,
 * никогда не только цветом) · янтарный = предупреждение. Правки цветов — только здесь.
 */

/* --- Шрифт: self-hosted, вариативный (200–800) --- */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("/fonts/PlusJakartaSans-var.woff2") format("woff2");
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: italic;
    font-weight: 200 800;
    font-display: swap;
    src: url("/fonts/PlusJakartaSans-var-italic.woff2") format("woff2");
}

:root {
    /* --- Канонические токены (design.md) --- */
    --color-paper:       oklch(96.8% 0.006 262);  /* фон страницы (под миллиметровкой) */
    --color-card:        oklch(99.3% 0.002 262);  /* поверхность карточки — тонированный белый, не #fff */
    --color-card-soft:   oklch(98% 0.004 262);
    --color-ink:         oklch(25% 0.04 262);     /* основной текст — глубокий navy, не #000 */
    --color-ink-2:       oklch(56% 0.03 262);     /* второстепенный текст */
    --color-rule:        oklch(90% 0.008 262);    /* hairline-бордеры */
    --color-rule-strong: oklch(81% 0.012 262);

    /* Единственный акцент приложения — красный логотипа CARreer (#EE1F2A):
       интерактивное и выбранное. */
    --color-accent:      oklch(59% 0.225 27);
    --color-accent-dark: oklch(50% 0.2 27);       /* hover/active */
    --color-accent-soft: oklch(96% 0.02 27);      /* выделенный фон, выбранные ряды */
    --color-accent-ink:  oklch(99% 0.005 27);     /* текст на залитом акценте */
    --color-focus:       var(--color-accent);

    /* Статус/успех + фирменное фоновое свечение. Значение — исторический бренд-зелёный. */
    --color-green:       #28c76f;
    --color-green-soft:  #dff8ea;

    /* Опасность: тёмный кармин — намеренно темнее и глуше бренд-красного,
       чтобы деструктивное не путалось с интерактивным. Деструктивные действия
       всегда несут текстовую метку (Löschen/Sperren), не только цвет. */
    --color-red:         oklch(45% 0.15 25);
    --color-red-soft:    #fff1f1;
    --color-amber:       #ff9f43;
    --color-amber-soft:  #fff4e5;

    --color-grey-soft:   #eef1f6;

    --font-ui: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;

    --shadow: 0 12px 32px rgba(16, 24, 40, 0.08); /* нейтральная, без цветных ореолов */

    /* Вся шкала радиусов приложения — три ступени. */
    --radius-input: 8px;
    --radius-card:  12px;
    --radius-pill:  999px;

    /* Шкала z-index — только именованные уровни. */
    --z-sticky:   100;
    --z-dropdown: 300;
    --z-modal:    1000;
    --z-popover:  1100;
    --z-toast:    1200;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 150ms;
    --dur-base: 200ms;

    /* --- Легаси-алиасы (исторические имена в style.css/candidates.css и страницах).
       Новый код использует канонические имена выше. --- */
    --bg:             var(--color-paper);
    --card:           var(--color-card);
    --card-soft:      var(--color-card-soft);
    --border:         var(--color-rule);
    --border-strong:  var(--color-rule-strong);
    --text:           var(--color-ink);
    --muted:          var(--color-ink-2);
    --green:          var(--color-green);
    --green-soft:     var(--color-green-soft);
    --red:            var(--color-red);
    --red-soft:       var(--color-red-soft);
    --amber:          var(--color-amber);
    --amber-soft:     var(--color-amber-soft);
    --grey-soft:      var(--color-grey-soft);
    --blue:           var(--color-accent);
    --blue-soft:      var(--color-accent-soft);
    --accent:         var(--color-accent);
    --accent-dark:    var(--color-accent-dark);
    --accent-soft:    var(--color-accent-soft);
    --primary:        var(--color-accent);
    --danger:         var(--color-red);
    --analytics-accent:      var(--color-accent);
    --analytics-accent-soft: var(--color-accent-soft);
    --radius:         var(--radius-card);
    /* Ранее нигде не объявлялись (тихо резолвились в unset) — закреплены: */
    --text-dim:       var(--color-ink-2);
    --panel:          var(--color-card-soft);
    --st-blue-fg:     var(--color-accent-dark);
}

/* --- Базовые правила системы (не компоненты) --- */

/* Колонки цифр не пляшут: таблицы и явно помеченные контейнеры. */
table,
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Фокус-кольцо: мгновенное, единое, ≥3:1 к фону. Никогда не анимируется. */
:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}