/* Токены дизайн-системы S21Party.
   Оба набора переменных описаны одинаковыми семантическими именами:
   переключается только значение, компоненты не переписываются.
   Спецификация: docs/15-dizayn-sistema-i-tipografika.md */

:root,
[data-theme="light"] {
    color-scheme: light;

    /* Поверхности */
    --color-bg: #ffffff;                /* фон страницы и шапки */
    --color-bg-secondary: #f5f7fa;      /* фон крупных секций и подвала */
    --color-surface: #f5f7fa;           /* карточки и панели */
    --color-surface-raised: #ffffff;    /* приподнятые панели, наведение на карточку */
    --color-surface-active: #eaf0f5;    /* выделенные области и подложки иконок */

    /* Текст */
    --color-text: #182d3d;
    --color-text-secondary: #52677d;
    --color-text-muted: #8b98a6;

    /* Акцент */
    --color-accent: #315a7d;
    --color-accent-hover: #24455f;
    --color-accent-pressed: #1a3648;
    --color-accent-soft: #f3f5f8;

    /* Границы и фокус */
    --color-border: #dde4eb;
    --color-border-strong: #dde4eb;
    --color-focus: #315a7d;

    /* Статусы */
    --color-success: #36775a;
    --color-warning: #9b702e;
    --color-error: #b34b4b;
    --color-info: #1e3a8a;

    /* Текст и иконки на акцентном фоне */
    --color-on-accent: #ffffff;

    /* Плашки поверх фото на главной: контрастный зелёно-бирюзовый */
    --color-hero-chip: #2f7d6d;
    --color-on-hero-chip: #4d708e;

    /* Плашки и бейджи: фон / текст / граница */
    --color-success-strong: #16a34a;
    --color-success-bg: #dcfce7;
    --color-success-text: #166534;
    --color-success-border: #bbf7d0;
    --color-info-bg: #dbeafe;
    --color-info-text: #1e3a8a;
    --color-info-border: #93c5fd;
    --color-warning-bg: #fef3c7;
    --color-warning-text: #92400e;
    --color-warning-border: #f59e0b;
    --color-error-bg: #fee2e2;
    --color-error-text: #991b1b;
    --color-error-border: #fca5a5;
    --color-done-bg: #ede9fe;
    --color-done-text: #5b21b6;
    --color-neutral-bg: #f1f5f9;
    --color-neutral-text: #475569;
    --color-neutral-border: #e2e8f0;

    /* Тени, оверлеи, кольцо фокуса */
    --shadow-menu: 0 8px 24px rgba(15, 23, 42, 0.12);
    --shadow-nav: 0 2px 5px rgba(0, 0, 0, 0.1);
    --shadow-bar: 0 -4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lightbox: 0 20px 60px rgba(0, 0, 0, 0.4);
    --color-overlay: rgba(15, 23, 42, 0.88);
    --color-modal-backdrop: rgba(15, 23, 42, 0.55);
    --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.15);

    /* Радиусы, раскладка, шапка */
    --radius-sm: 5px;
    --radius-md: 6px;
    --radius-lg: 14px;                  /* плавающие кнопки (квадрат со скруглением) */
    --radius-pill: 999px;
    --reading-width: 700px;
    --header-height: 64px;
    --control-height: 42px;            /* кнопки, поля ввода и фильтры */
    --button-gap: 12px;                /* расстояние между кнопками в группе действий */
    --cookie-consent-reserve: 96px;     /* сколько места занимает плашка cookie внизу */
}

@media (max-width: 768px) {
    :root {
        /* Плашка теперь карточка с отступом от края — на узких экранах выше. */
        --cookie-consent-reserve: 208px;
    }
}

@media (max-width: 480px) {
    :root {
        --cookie-consent-reserve: 240px;
    }
}

/* Тёмная тема: альтернативная палитра той же системы, а не инверсия.
   Фон не чистый чёрный, поверхности различаются на ступень,
   акцент остаётся фирменным синим (светлее — иначе не читается). */
[data-theme="dark"] {
    color-scheme: dark;

    /* Поверхности */
    --color-bg: #0d1622;
    --color-bg-secondary: #111c29;
    --color-surface: #131f2d;
    --color-surface-raised: #192839;
    --color-surface-active: #203247;

    /* Текст */
    --color-text: #e7edf4;
    --color-text-secondary: #a8b6c6;
    --color-text-muted: #8190a1;

    /* Акцент */
    --color-accent: #6fa5d6;
    --color-accent-hover: #8ab9e3;
    --color-accent-pressed: #4d86b8;
    --color-accent-soft: #6EA4D4FF;

    /* Границы и фокус */
    --color-border: #2a3b4e;
    --color-border-strong: #5f7a93;     /* поля ввода: 3:1 к фону и поверхности */
    --color-focus: #8ab9e3;

    /* Статусы */
    --color-success: #67b58b;
    --color-warning: #d8aa62;
    --color-error: #e17c7c;
    --color-info: #6fa5d6;

    /* Текст и иконки на акцентном фоне: акцент светлый, текст тёмный */
    --color-on-accent: #0d1622;
    --color-hero-chip: #3d8f7c;
    --color-on-hero-chip: #0d1622;

    /* Плашки и бейджи: фон / текст / граница */
    --color-success-strong: #67b58b;
    --color-success-bg: #14291e;
    --color-success-text: #7fc79b;
    --color-success-border: #2c5641;
    --color-info-bg: #14243a;
    --color-info-text: #8fb8e8;
    --color-info-border: #2e4a6e;
    --color-warning-bg: #322616;
    --color-warning-text: #e0b978;
    --color-warning-border: #5c4726;
    --color-error-bg: #331c1e;
    --color-error-text: #e49a9a;
    --color-error-border: #603537;
    --color-done-bg: #241e3b;
    --color-done-text: #b9a6ec;
    --color-neutral-bg: #1b2735;
    --color-neutral-text: #a8b6c6;
    --color-neutral-border: #2a3b4e;

    /* Тени, оверлеи, кольцо фокуса */
    --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-nav: 0 2px 5px rgba(0, 0, 0, 0.5);
    --shadow-bar: 0 -4px 20px rgba(0, 0, 0, 0.45);
    --shadow-lightbox: 0 24px 60px rgba(0, 0, 0, 0.7);
    --color-overlay: rgba(5, 9, 14, 0.88);
    --color-modal-backdrop: rgba(5, 9, 14, 0.7);
    --focus-ring: 0 0 0 3px rgba(111, 165, 214, 0.35);
}