/* ==========================================================================
   Токены дизайн-системы. Единственное место, где живут цвета и размеры.
   Правила и обоснования: docs/design-system.md
   ========================================================================== */

:root {
    /* Поверхности */
    --ground: #F2F3F5;
    --surface: #FFFFFF;
    --surface-2: #F7F8F9;
    --surface-3: #EDEFF1;

    /* Текст */
    --ink: #1B1C1E;
    --ink-2: #5A6068;
    --ink-3: #6B7280;

    /* Линии — используются точечно */
    --hairline: #E8EAEC;

    /* Бренд: жёлтый только в заливках, текст на нём всегда тёмный */
    --brand: #FFDD2D;
    --brand-hover: #F5D000;
    --brand-soft: #FFF6CC;
    --brand-soft-ink: #7A5C00;
    --on-brand: #1B1C1E;

    /* Оранжевый — язык данных: полосы, доли, акценты в графике */
    --accent: #FF7A00;
    --accent-soft: #FFF0E0;

    /* Семантика */
    --ok: #1BA05B;
    --ok-soft: #E4F6EC;
    --warn: #E8890C;
    --warn-soft: #FDF0DD;
    --err: #E0323C;
    --err-soft: #FCE9EA;

    /* Нутриенты */
    --macro-p: #4B5563;
    --macro-f: #FFC93C;
    --macro-c: #FF7A00;

    /* Инвертированная карточка (Pro и подобные акценты) */
    --invert-bg: #1B1C1E;
    --invert-ink: #F2F3F5;
    --invert-muted: #A0A6AE;
    --invert-btn-bg: #FFDD2D;
    --invert-btn-ink: #1B1C1E;

    /* Единственная тень в системе — под липкой шапкой, см. design-system.md */
    --shadow-sticky: 0 4px 16px rgba(27, 28, 30, .07);

    /* Форма */
    --r-card: 16px;
    --r-inner: 12px;
    --r-control: 12px;
    --r-pill: 999px;

    /* Типографика */
    --font-ui: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-content: var(--font-ui);

    /* Шкала отступов */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 22px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 64px;

    /* Раскладка */
    --page-max: 1120px;
    --measure: 68ch;
    /* Высота липкой шапки: от неё считаются липкий сайдбар и якорные ссылки */
    --header-h: 60px;

    --focus: #1B1C1E;
}

/* Тёмная тема по настройке системы — если пользователь явно не выбрал светлую */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ground: #0F1113;
        --surface: #1A1C1F;
        --surface-2: #212429;
        --surface-3: #2A2E34;

        --ink: #F2F3F5;
        --ink-2: #A8AEB7;
        --ink-3: #8A919A;

        --hairline: #2B2F34;

        --brand-hover: #FFE55C;
        --brand-soft: #332C0E;
        --brand-soft-ink: #FFDD2D;

        --accent: #FF8F2E;
        --accent-soft: #33210F;

        --ok: #3DD68C;
        --ok-soft: #12291D;
        --warn: #F0A93C;
        --warn-soft: #2E2210;
        --err: #F4646D;
        --err-soft: #331618;

        --macro-p: #9BA3AE;
        --macro-f: #FFD35C;
        --macro-c: #FF8F2E;

        --invert-bg: #FFDD2D;
        --invert-ink: #1B1C1E;
        --invert-muted: #6B5F22;
        --invert-btn-bg: #1B1C1E;
        --invert-btn-ink: #FFDD2D;

        --shadow-sticky: 0 6px 20px rgba(0, 0, 0, .45);

        --focus: #F2F3F5;
    }
}

/* Явный выбор пользователя перекрывает системную настройку */
:root[data-theme="dark"] {
    --ground: #0F1113;
    --surface: #1A1C1F;
    --surface-2: #212429;
    --surface-3: #2A2E34;

    --ink: #F2F3F5;
    --ink-2: #A8AEB7;
    --ink-3: #8A919A;

    --hairline: #2B2F34;

    --brand-hover: #FFE55C;
    --brand-soft: #332C0E;
    --brand-soft-ink: #FFDD2D;

    --accent: #FF8F2E;
    --accent-soft: #33210F;

    --ok: #3DD68C;
    --ok-soft: #12291D;
    --warn: #F0A93C;
    --warn-soft: #2E2210;
    --err: #F4646D;
    --err-soft: #331618;

    --macro-p: #9BA3AE;
    --macro-f: #FFD35C;
    --macro-c: #FF8F2E;

    --invert-bg: #FFDD2D;
    --invert-ink: #1B1C1E;
    --invert-muted: #6B5F22;
    --invert-btn-bg: #1B1C1E;
    --invert-btn-ink: #FFDD2D;

    --shadow-sticky: 0 6px 20px rgba(0, 0, 0, .45);

    --focus: #F2F3F5;
}