/* tokens.css — единственный источник дизайн-токенов (T-611, DEC-0043).
 * Подключается один раз, до base.css (views/partials/head.ejs, views/menu/page.ejs).
 * Компоненты берут цвета, отступы, радиусы, тени, размеры текста и межстрочный
 * интервал только отсюда: литералов (#hex, rgb(), px в отступах/радиусах/тенях/
 * шрифте) в остальных CSS нет, это проверяет tests/integration/design-tokens.test.ts.
 *
 * Схемы: светлая — по умолчанию (:root); тёмная — при prefers-color-scheme: dark
 * (если владелец не закрепил data-theme="light") и при data-theme="dark".
 * Блок тёмной схемы записан дважды (media и атрибут) — CSS не умеет общих блоков;
 * тест следит, чтобы они совпадали.
 *
 * Контраст (WCAG 2.1): текст/фон ≥ 4.5:1, крупный текст и элементы интерфейса ≥ 3:1
 * в обеих схемах. Пары проверяет тот же тест по значениям этого файла.
 */

:root {
  color-scheme: light;

  /* ===== Цвет: поверхности ===== */
  --color-bg: #f9f9f9;
  --color-page-top: #faf7f2;
  --color-page-bottom: #f0e9e1;
  --color-surface: #ffffff;
  --color-surface-muted: #f9f9f9;
  --color-panel-top: #ffffff;
  --color-panel-bottom: #f8f4ef;
  --color-glass: rgba(255, 255, 255, 0.8);
  --color-glass-strong: rgba(255, 255, 255, 0.92);
  --color-chip: rgba(18, 18, 18, 0.04);
  --color-chip-active: #ffffff;

  /* ===== Цвет: текст ===== */
  --color-text: #14110f;
  --color-text-secondary: #555555;
  --color-text-muted: #54504b;
  /* недоступное блюдо: приглушённый, но непрозрачный текст ≥4.5:1 на панели и фоне */
  --color-text-unavailable: #5f5f5f;

  /* ===== Цвет: границы ===== */
  --color-border: rgba(18, 18, 18, 0.12);
  --color-border-subtle: rgba(18, 18, 18, 0.08);
  --color-border-strong: #8a8a8a;

  /* ===== Цвет: акцент и состояния ===== */
  --color-accent: #cd1719;
  --color-accent-hover: #a11214;
  --color-accent-text: #cd1719;
  --color-on-accent: #ffffff;
  --color-focus-ring: #cd1719;
  --color-danger: #b3261e;
  --color-danger-bg: #fdecea;
  --color-success: #2e7d32;
  --color-success-bg: #e8f5e9;
  --color-success-text: #1b5e20;
  --color-info: #1565c0;
  --color-warning: #b45309;
  --color-neutral: #555555;
  --color-accent-tint: color-mix(in srgb, var(--color-accent) 12%, transparent);
  --color-accent-line: color-mix(in srgb, var(--color-accent) 28%, transparent);
  --color-focus-glow: color-mix(in srgb, var(--color-accent) 22%, transparent);

  /* ===== Цвет: шапка, подложка окна, плашки ===== */
  --color-header-bg: #121212;
  --color-header-menu-bg: rgba(10, 10, 10, 0.98);
  --color-on-header: #ffffff;
  --color-header-accent: #ff6b6e;
  --color-scrim: rgba(0, 0, 0, 0.55);
  --color-scrim-badge: rgba(0, 0, 0, 0.72);
  --color-on-scrim: #ffffff;

  /* ===== Цвет: недоступное блюдо (непрозрачные плашки вместо opacity) ===== */
  --color-unavailable-fill: #5f5f5f;
  --color-on-unavailable: #ffffff;
  --color-unavailable-image-overlay: rgba(255, 255, 255, 0.6);

  /* ===== Цвет: посадочная страница (тёмная в обеих схемах) ===== */
  --landing-bg-top: #1c1c20;
  --landing-bg-bottom: #0b0b0d;
  --landing-glow-warm: rgba(255, 226, 190, 0.14);
  --landing-glow-accent: rgba(205, 23, 25, 0.28);
  --landing-text: #ffffff;
  --landing-text-muted: rgba(255, 255, 255, 0.84);
  --landing-text-subtle: rgba(255, 255, 255, 0.72);
  --landing-line: rgba(255, 255, 255, 0.38);
  --landing-line-strong: rgba(255, 255, 255, 0.62);
  --landing-hover: rgba(255, 255, 255, 0.08);

  /* ===== Тени ===== */
  --shadow-xs: 0 2px 10px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.16);
  --shadow-soft: 0 16px 32px rgba(18, 18, 18, 0.06);
  --shadow-card: 0 24px 56px rgba(18, 18, 18, 0.08);
  --shadow-chip: 0 10px 22px rgba(18, 18, 18, 0.08);
  --shadow-image: 0 14px 28px rgba(18, 18, 18, 0.1);
  --shadow-rail: 0 -14px 28px rgba(18, 18, 18, 0.08);
  --shadow-raised: 0 20px 40px rgba(0, 0, 0, 0.15);
  --shadow-modal: 0 30px 60px rgba(0, 0, 0, 0.16);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --shadow-focus: 0 0 0 3px var(--color-focus-glow);
  --shadow-focus-lg: 0 0 0 4px var(--color-accent-tint);

  /* ===== Отступы: шкала 4/8/12/16/24/32 ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* ===== Радиусы ===== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ===== Шрифт: системный (OQ-5), единая шкала ===== */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 2.875rem;
  --text-display: clamp(2.6rem, 8vw, 5rem);
  --text-lead: clamp(1rem, 1.35vw + 0.6rem, 1.2rem);
  --lh-display: 1.1;
  --lh-tight: 1.2;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;
  --tracking-tight: -0.01em;
  --tracking-display: -0.02em;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.04em;

  /* ===== Размеры и раскладка ===== */
  --size-touch: 44px;
  --size-header: 60px;
  /* большое распространение inset-тени: непрозрачная подложка поверх фото */
  --overlay-spread: 9999px;
  --layout-max: 1180px;
  --layout-gutter: clamp(var(--space-4), 2vw, calc(var(--space-6) + var(--space-1)));

  /* ===== Адаптивные отступы компонентов: проценты, vw/vh и clamp() только здесь ===== */
  --inset-container-bottom: 2%;
  --inset-cart-row: 3%;
  --gap-cart-image: 10%;
  --inset-discovery-strip: 3% 0 1%;
  --inset-discovery-inline: clamp(var(--space-4), 3vw, calc(var(--space-6) + var(--space-1)));
  --gutter-header: 8%;
  --gutter-header-narrow: 5%;
  --offset-login-top: 12vh;
  --offset-auth-page-top: 100px;
  --inset-landing-top: clamp(calc(var(--space-6) * 2), 10vh, calc(var(--space-8) * 4));
  --gap-landing-grid: clamp(var(--space-4), 2.4vw, var(--space-6));
  --gap-landing-cta: clamp(var(--space-2), 1.6vw, var(--space-4));
  --gap-menu-tight: clamp(var(--space-3), 1.6vw, var(--space-6));
  --gap-menu-loose: clamp(var(--space-4), 2vw, var(--space-8));
  --gap-minimal-tile: clamp(calc(var(--space-4) + var(--space-1)), 2.4vw, var(--space-8));
  --gap-minimal-row: clamp(calc(var(--space-6) + var(--space-1)), 3vw, calc(var(--space-8) + var(--space-2)));
  --inset-minimal-modal: clamp(var(--space-4), 3vw, calc(var(--space-8) + var(--space-1)));
  --text-minimal-modal-title: clamp(var(--text-lg), 2.6vw, var(--text-2xl));
  --mix-badge-solid: 92%;
  /* отступы от края контейнера или окна в формулах width/max-width/max-height: calc(100% - …) */
  --offset-menu-container-narrow: calc(var(--space-6) + var(--space-1));
  --offset-minimal-badge: var(--space-6);
  --offset-minimal-badge-narrow: var(--space-4);
  --offset-minimal-modal-block: calc(var(--space-8) + var(--space-2));
  --offset-modal-block: calc(var(--space-8) * 2 - var(--space-2));
  --offset-modal-inline: calc(var(--space-8) * 2 + var(--space-2));
  /* высота ленты вкладок снизу; запас под safe-area добавляет menu.css */
  --tab-rail-height: 88px;

  /* ===== Движение ===== */
  --duration-fast: 0.15s;
  --duration-base: 0.3s;
  --duration-slow: 0.6s;
  --duration-slower: 1s;
  --ease-standard: cubic-bezier(0.25, 0.8, 0.25, 1);
  --ease-out: cubic-bezier(0.6, 0, 0.2, 1);
}

@media (max-width: 768px) {
  :root {
    --tab-rail-height: 94px;
  }
}

@media (max-width: 480px) {
  :root {
    --tab-rail-height: 102px;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #121212;
    --color-page-top: #141414;
    --color-page-bottom: #0e0e0e;
    --color-surface: #1e1e1e;
    --color-surface-muted: #262626;
    --color-panel-top: #232323;
    --color-panel-bottom: #1a1a1a;
    --color-glass: rgba(30, 30, 30, 0.8);
    --color-glass-strong: rgba(30, 30, 30, 0.92);
    --color-chip: rgba(255, 255, 255, 0.06);
    --color-chip-active: #333333;

    --color-text: #f2efec;
    --color-text-secondary: #cfcac5;
    --color-text-muted: #b0aaa4;
    --color-text-unavailable: #a8a2a0;

    --color-border: rgba(255, 255, 255, 0.16);
    --color-border-subtle: rgba(255, 255, 255, 0.1);
    --color-border-strong: #8c8c8c;

    --color-accent: #d32f2f;
    --color-accent-hover: #b71c1c;
    --color-accent-text: #ff6b6e;
    --color-focus-ring: #ff6b6e;
    --color-danger: #ffb4ab;
    --color-danger-bg: #2c1513;
    --color-success-bg: #14251a;
    --color-success-text: #a5d6a7;

    --color-header-bg: #0b0b0b;
    --color-scrim: rgba(0, 0, 0, 0.7);
    --color-scrim-badge: rgba(0, 0, 0, 0.8);

    --color-unavailable-fill: #6b6b6b;
    --color-on-unavailable: #ffffff;
    --color-unavailable-image-overlay: rgba(0, 0, 0, 0.55);

    --shadow-xs: 0 2px 10px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55);
    --shadow-soft: 0 16px 32px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 24px 56px rgba(0, 0, 0, 0.45);
    --shadow-chip: 0 10px 22px rgba(0, 0, 0, 0.4);
    --shadow-image: 0 14px 28px rgba(0, 0, 0, 0.5);
    --shadow-rail: 0 -14px 28px rgba(0, 0, 0, 0.5);
    --shadow-raised: 0 20px 40px rgba(0, 0, 0, 0.55);
    --shadow-modal: 0 30px 60px rgba(0, 0, 0, 0.6);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
}

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

  --color-bg: #121212;
  --color-page-top: #141414;
  --color-page-bottom: #0e0e0e;
  --color-surface: #1e1e1e;
  --color-surface-muted: #262626;
  --color-panel-top: #232323;
  --color-panel-bottom: #1a1a1a;
  --color-glass: rgba(30, 30, 30, 0.8);
  --color-glass-strong: rgba(30, 30, 30, 0.92);
  --color-chip: rgba(255, 255, 255, 0.06);
  --color-chip-active: #333333;

  --color-text: #f2efec;
  --color-text-secondary: #cfcac5;
  --color-text-muted: #b0aaa4;
  --color-text-unavailable: #a8a2a0;

  --color-border: rgba(255, 255, 255, 0.16);
  --color-border-subtle: rgba(255, 255, 255, 0.1);
  --color-border-strong: #8c8c8c;

  --color-accent: #d32f2f;
  --color-accent-hover: #b71c1c;
  --color-accent-text: #ff6b6e;
  --color-focus-ring: #ff6b6e;
  --color-danger: #ffb4ab;
  --color-danger-bg: #2c1513;
  --color-success-bg: #14251a;
  --color-success-text: #a5d6a7;

  --color-header-bg: #0b0b0b;
  --color-scrim: rgba(0, 0, 0, 0.7);
  --color-scrim-badge: rgba(0, 0, 0, 0.8);

  --color-unavailable-fill: #6b6b6b;
  --color-on-unavailable: #ffffff;
  --color-unavailable-image-overlay: rgba(0, 0, 0, 0.55);

  --shadow-xs: 0 2px 10px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 16px 32px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 24px 56px rgba(0, 0, 0, 0.45);
  --shadow-chip: 0 10px 22px rgba(0, 0, 0, 0.4);
  --shadow-image: 0 14px 28px rgba(0, 0, 0, 0.5);
  --shadow-rail: 0 -14px 28px rgba(0, 0, 0, 0.5);
  --shadow-raised: 0 20px 40px rgba(0, 0, 0, 0.55);
  --shadow-modal: 0 30px 60px rgba(0, 0, 0, 0.6);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Пользователь просит меньше движения: все длительности токенов обнуляются. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-base: 0.01ms;
    --duration-slow: 0.01ms;
    --duration-slower: 0.01ms;
  }
}