/* ============================================================================
   Дизайн-токены Buddy Code — общий слой сайта, кабинета и (позже) админки.
   План 19, §19.4.

   Имена переменных намеренно совпадают с теми, что уже используются в
   `app/admin/static/admin.css`. Значения — новые, брендовые. Такой порядок
   выбран потому, что перевести панель на общий файл можно будет одной строкой
   подключения, не трогая ни одного класса в её разметке: имена уже совпадают,
   меняется только палитра. Переезд админки — отдельная задача после запуска
   сайта, здесь его нет.

   Контраст каждой пары «текст на фоне» посчитан по WCAG 2.1, а не подобран на
   глаз, и проверяется тестом `tests/test_design_tokens.py`. Два значения в
   палитре выглядят неожиданно, и оба — результат этого расчёта:

     * зелёный `#059669` на белом даёт 3.77 — ниже порога 4.5 для текста.
       Поэтому текстовый зелёный в светлой теме `#047857` (5.48), а `#059669`
       остаётся для рамок и значков, где порог 3.0;
     * белый на `#6366f1` даёт 4.47 — недобор в сотых. Кнопка в тёмной теме
       заливается `#4f46e5`, а не `#6366f1`.

   Обе сотых глазом не видны, а тест их ловит.
   ========================================================================= */

:root {
    color-scheme: light dark;

    /* ---- шкала отступов, 4px в основании (из админки, без изменений) ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 5rem;      /* вертикальные отступы секций на десктопе */
    /* План 214, MOB-1.1: --space-10/11/12 использовались в публичных страницах
       без определения, что обнуляло padding-block (var() с невалидным токеном
       делает шортхэнд целиком invalid → computed-value = unset). Шкала растёт
       шагом ~1.5× от --space-9. */
    --space-10: 6.5rem;
    --space-11: 8rem;
    --space-12: 10rem;

    /* План 214, MOB-2.1: высота мобильной шапки публичной витрины.
       Используется в PublicHeader.vue для позиционирования drawer/backdrop
       (раньше была захардкожена 56px, что было меньше реальных 65px и
       приводило к перекрытию нижнего бордера на 9px). При правке burger'а
       в MOB-7 (40→44px) — синхронно править это значение. */
    --ph-bar-height: 69px;     /* burger 44px (MOB-7.1) + padding 12px×2 + border 1px */

    /* ---- радиусы и тени ---- */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.10);

    /* ---- шкала шрифтов ---- */
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-md: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: 2rem;
    --font-4xl: 2.5rem;
    --font-5xl: 3.5rem;

    /* Системный стек — фолбэк и одновременно единственный шрифт для языков,
       которым веб-шрифт не грузится (см. ниже про `:lang`). */
    --font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
        "Noto Sans", Arial, sans-serif;
    --font-sans: "Inter var", var(--font-system);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", monospace;

    /* ---- ширины ---- */
    --container-max: 1200px;
    --container-narrow: 720px;   /* текстовые страницы: 65–75 знаков в строке */
    --container-form: 480px;

    /* ---- движение ----
       Единственное, что на сайте двигается, — цвет и тень при наведении.
       Появлений по скроллу нет: они портят CLS и мешают на медленных
       машинах, а продают не они. */
    --motion-fast: 120ms;
    --motion-base: 180ms;

    /* ---- светлая тема ---- */
    --color-bg: #ffffff;
    --color-bg-subtle: #f7f8fa;
    --color-surface: #ffffff;
    --color-surface-2: #fafbfc;
    --color-surface-hover: #f3f4f6;
    --color-border: #e5e7eb;
    --color-border-strong: #d1d5db;
    --color-text: #111827;
    --color-text-muted: #5b6472;
    --color-text-faint: #8b94a3;

    /* ---- тёплый бренд (план 22, §22.4) ----
       Контрасты посчитаны WCAG 2.1 и проверены в test_design_tokens.py:
       белый на --color-brand — 9.63, brand на cream — 8.92. */
    --color-brand: #1f4d3a;
    --color-brand-strong: #163829;
    --color-brand-soft: #e8efe9;
    /* План 111, §SF-11: заливка CTA-кнопки. В светлой совпадает с
       --color-brand, в тёмной — с --color-brand-strong: тёмный brand
       (#88d2b0) — это «текстовый бренд» для графитового фона, и белый
       текст на нём даёт всего 1.77. Отдельный токен, как --color-primary-solid
       ниже, чтобы заливка и текстовый акцент не были связаны. */
    --color-brand-fill: #1f4d3a;
    /* Telegram: фирменный синий логотипа чужого бренда (кнопка чата).
       Одинаков в обеих темах: фирменную палитру тема сайта не красит. */
    --color-telegram: #26a5e4;

    /* План 333: золото premium — лейбл «PREMIUM» в кабинете. По правке
       владельца 23.09 лейбл — ТОЛЬКО текст, без плашки: в светлой теме
       золото темнее, чтобы пройти WCAG на белой карточке (пара
       gold-text/surface проверяется в test_design_tokens.py);
       gold-hi — стоп градиента шиммера (декор). */
    --color-gold-text: #8a6d1f;
    --color-gold-hi: #c9992e;

    /* ---- кремовый — фон секций, чередуется с белым ---- */
    --color-cream: #faf6ec;
    --color-cream-edge: #ece5d2;

    --color-primary: #4f46e5;
    --color-primary-hover: #4338ca;
    --color-primary-bg: #eef2ff;
    --color-primary-fg: #ffffff;
    /* Заливка кнопки — отдельный токен: в тёмной теме текстовый цвет ссылки
       светлеет, а заливка обязана остаться тёмной, иначе белый на ней
       недобирает до порога. */
    --color-primary-solid: #4f46e5;

    --color-success: #047857;
    --color-success-bg: #ecfdf5;
    --color-success-mark: #059669;   /* рамки и значки: порог 3.0, не 4.5 */
    --color-warning: #b45309;
    --color-warning-bg: #fffbeb;
    /* Не `#dc2626`, хотя именно он напрашивается: на своей же мягкой подложке
       он даёт 4.41 — недобор в сотых, ровно как у зелёного выше. Красный
       текст ошибки почти всегда стоит на этой подложке, так что берём
       вариант потемнее (5.91). Найдено тестом, а не глазом. */
    --color-danger: #b91c1c;
    --color-danger-bg: #fef2f2;
    --color-info: #0e7490;
    --color-info-bg: #ecfeff;

    --color-focus: #4f46e5;
}

/* Тёмная тема в двух видах: по выбору пользователя и по системной настройке.
   Второе обязательно, потому что до и без JavaScript выбора ещё нет, а
   аудитория — разработчики, у которых тёмная тема включена системно. */
[data-theme="dark"] {
    --color-bg: #0b0f17;
    --color-bg-subtle: #0f141d;
    --color-surface: #151b26;
    --color-surface-2: #1b2230;
    --color-surface-hover: #202838;
    --color-border: #232b3a;
    --color-border-strong: #303a4d;
    --color-text: #e5e7eb;
    --color-text-muted: #9aa4b2;
    --color-text-faint: #6b7280;

    /* План 22, §22.4: brand светлеет для контраста на графитовом
       (10.86). brand-strong остаётся тёмно-зелёным — это заливка под
       белый текст (бейдж, hover), инвертировать нельзя.
       План 111, §SF-11: заливка CTA — brand-strong, не brand — белый
       на brand даёт 1.77, на brand-strong — 12.87 (план 113, DC-4). */
    --color-brand: #88d2b0;
    --color-brand-strong: #163829;
    --color-brand-soft: #1f3a2e;
    --color-brand-fill: #163829;
    /* Telegram: фирменный синий логотипа — как в светлой теме (см. :root). */
    --color-telegram: #26a5e4;

    /* План 333: золото premium (тёмная тема). Лейбл без плашки: контраст
       пары gold-text/surface проверяет стражевой тест. */
    --color-gold-text: #e6c05c;
    --color-gold-hi: #f3dfa4;

    /* Кремовый в тёмной не используется (план 22), переопределён чтобы
       случайная утечка не светила светлым пятном. */
    --color-cream: #1f1410;
    --color-cream-edge: #2a201a;

    --color-primary: #818cf8;
    --color-primary-hover: #a5b4fc;
    --color-primary-bg: #1e1b4b;
    --color-primary-fg: #ffffff;
    --color-primary-solid: #4f46e5;

    --color-success: #34d399;
    --color-success-bg: #052e22;
    --color-success-mark: #34d399;
    --color-warning: #fbbf24;
    --color-warning-bg: #3a2708;
    --color-danger: #f87171;
    --color-danger-bg: #3f1414;
    --color-info: #22d3ee;
    --color-info-bg: #0b3a44;

    --color-focus: #a5b4fc;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
    /* Тот же набор, но только когда пользователь ничего не выбирал явно.
       `:not([data-theme])` здесь важнее, чем кажется: без него системная
       тёмная перебивала бы ручной выбор светлой. */
    :root:not([data-theme]) {
        --color-bg: #0b0f17;
        --color-bg-subtle: #0f141d;
        --color-surface: #151b26;
        --color-surface-2: #1b2230;
        --color-surface-hover: #202838;
        --color-border: #232b3a;
        --color-border-strong: #303a4d;
        --color-text: #e5e7eb;
        --color-text-muted: #9aa4b2;
        --color-text-faint: #6b7280;

        /* Дубликат блока [data-theme="dark"]: ручной выбор и системная
           настройка должны давать одинаковый результат. */
        --color-brand: #88d2b0;
        --color-brand-strong: #163829;
        --color-brand-soft: #1f3a2e;
        --color-brand-fill: #163829;
        --color-telegram: #26a5e4;
        --color-cream: #1f1410;
        --color-cream-edge: #2a201a;

        --color-primary: #818cf8;
        --color-primary-hover: #a5b4fc;
        --color-primary-bg: #1e1b4b;
        --color-primary-fg: #ffffff;
        --color-primary-solid: #4f46e5;

        --color-success: #34d399;
        --color-success-bg: #052e22;
        --color-success-mark: #34d399;
        --color-warning: #fbbf24;
        --color-warning-bg: #3a2708;
        --color-danger: #f87171;
        --color-danger-bg: #3f1414;
        --color-info: #22d3ee;
        --color-info-bg: #0b3a44;

        --color-focus: #a5b4fc;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
}