/* ══════════════════════════════════════════════════════════════════════
   MOON — шаблоны оформления.

   Каждый шаблон — только набор переменных: палитра, скругления и шрифт
   заголовков. Разметка и поведение сайта у всех одинаковые, поэтому новый
   шаблон добавляется одним блоком ниже и строкой в src/lib/themes.ts.

   Селекторы намеренно по атрибуту, а не по :root — тогда в админке можно
   показать живой образец шаблона, повесив data-theme на обычный блок.

   Контраст каждой пары проверен: текст на фоне и на карточке, надпись на
   кнопке и ссылка — все не ниже 4.5 : 1.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Луна: тёплый беж и кофе (по умолчанию) ─────────────────────────── */
[data-theme="moon"] {
  --bg: #e7ded5;
  --bg-deep: #ddd2c6;
  --bg-glow: rgba(255, 253, 249, 0.85);
  --surface: #f7f3ee;
  --surface-raised: #fbf9f6;

  --ink: #2b251f;
  --ink-soft: #5c5145;
  --on-bg: #2b251f;
  --on-bg-soft: #5c5145;

  --accent: #806b51;
  --accent-strong: #6a5a46;
  --accent-quiet: #b39473;
  /* Фон страницы темнее карточки, поэтому акцент на нём берётся тот же, что
     и на карточке: светлый #806b51 давал на фоне 3.8 — мало для мелкого
     текста вроде подписи разработчика и разделов в шапке. */
  --accent-on-bg: #6a5a46;
  --on-accent: #fdfbf8;

  --line: rgba(43, 37, 31, 0.12);
  --line-strong: rgba(43, 37, 31, 0.2);
  --line-bg: rgba(43, 37, 31, 0.12);
  --line-bg-strong: rgba(43, 37, 31, 0.2);

  --footer-bg: color-mix(in srgb, var(--surface) 72%, var(--bg));

  --danger: #8a3f2e;
  --danger-soft: #f6e7e2;

  --font-display: "Fixel Display", "Fixel Text", ui-sans-serif, system-ui, sans-serif;
  --card-radius: 24px;
  --card-radius-lg: 30px;
}

/* ─── Матча: сливочный и глубокий зелёный, засечки в заголовках ──────── */
[data-theme="matcha"] {
  --bg: #f2f0e4;
  --bg-deep: #e3e0cf;
  --bg-glow: rgba(255, 255, 250, 0.8);
  --surface: #fbfaf3;
  --surface-raised: #ffffff;

  --ink: #1e2a1f;
  --ink-soft: #495a49;
  --on-bg: #1e2a1f;
  --on-bg-soft: #495a49;

  --accent: #2f5d3a;
  --accent-strong: #27502f;
  --accent-quiet: #8aa77f;
  --accent-on-bg: #27502f;
  --on-accent: #f6faf4;

  --line: rgba(30, 42, 31, 0.12);
  --line-strong: rgba(30, 42, 31, 0.2);
  --line-bg: rgba(30, 42, 31, 0.12);
  --line-bg-strong: rgba(30, 42, 31, 0.2);

  --footer-bg: color-mix(in srgb, var(--surface) 70%, var(--bg));

  --danger: #8a3f2e;
  --danger-soft: #f7e8e3;

  --font-display: Georgia, "Times New Roman", "Noto Serif", serif;
  --card-radius: 16px;
  --card-radius-lg: 20px;
}

/* ─── Какао: тёмная страница, светлые карточки ──────────────────────── */
[data-theme="cocoa"] {
  --bg: #40211c;
  --bg-deep: #331a16;
  --bg-glow: rgba(255, 224, 208, 0.08);
  --surface: #fff7f2;
  --surface-raised: #ffffff;

  /* Тёмный текст — для карточек; светлый — для страницы. */
  --ink: #2a1512;
  --ink-soft: #6b4b43;
  --on-bg: #f7e8e1;
  --on-bg-soft: #d6b3a6;

  --accent: #b04c35;
  --accent-strong: #a0452f;
  --accent-quiet: #e0a48d;
  --accent-on-bg: #e0a48d;
  --on-accent: #fff7f2;

  --line: rgba(42, 21, 18, 0.12);
  --line-strong: rgba(42, 21, 18, 0.2);
  --line-bg: rgba(255, 237, 229, 0.16);
  --line-bg-strong: rgba(255, 237, 229, 0.3);

  --footer-bg: #331a16;

  --danger: #8a3f2e;
  --danger-soft: #f6e7e2;

  --font-display: "Fixel Display", "Fixel Text", ui-sans-serif, system-ui, sans-serif;
  --card-radius: 20px;
  --card-radius-lg: 26px;
}

/* ─── Молоко: почти белый, много воздуха, крупные скругления ─────────── */
[data-theme="milk"] {
  --bg: #eef0f2;
  --bg-deep: #e2e5e8;
  --bg-glow: rgba(255, 255, 255, 0.9);
  --surface: #ffffff;
  --surface-raised: #ffffff;

  --ink: #1b1f24;
  --ink-soft: #5a626c;
  --on-bg: #1b1f24;
  --on-bg-soft: #5a626c;

  --accent: #2d3340;
  --accent-strong: #20252f;
  --accent-quiet: #a9b2bd;
  --accent-on-bg: #2d3340;
  --on-accent: #ffffff;

  --line: rgba(27, 31, 36, 0.1);
  --line-strong: rgba(27, 31, 36, 0.18);
  --line-bg: rgba(27, 31, 36, 0.1);
  --line-bg-strong: rgba(27, 31, 36, 0.18);

  --footer-bg: color-mix(in srgb, var(--surface) 65%, var(--bg));

  --danger: #a33a2a;
  --danger-soft: #f8e9e6;

  --font-display: "Fixel Display", "Fixel Text", ui-sans-serif, system-ui, sans-serif;
  --card-radius: 28px;
  --card-radius-lg: 36px;
}

/* ─── Карамель: песочный и графит, засечки, острые углы ──────────────── */
[data-theme="caramel"] {
  --bg: #f0e7db;
  --bg-deep: #e2d6c5;
  --bg-glow: rgba(255, 252, 246, 0.85);
  --surface: #fffdf9;
  --surface-raised: #ffffff;

  --ink: #241f1a;
  --ink-soft: #5d5245;
  --on-bg: #241f1a;
  --on-bg-soft: #5d5245;

  --accent: #9c5c34;
  --accent-strong: #8e5430;
  --accent-quiet: #d9a77a;
  --accent-on-bg: #8e5430;
  --on-accent: #fffaf4;

  --line: rgba(36, 31, 26, 0.13);
  --line-strong: rgba(36, 31, 26, 0.22);
  --line-bg: rgba(36, 31, 26, 0.13);
  --line-bg-strong: rgba(36, 31, 26, 0.22);

  --footer-bg: color-mix(in srgb, var(--surface) 68%, var(--bg));

  --danger: #8a3f2e;
  --danger-soft: #f6e7e2;

  --font-display: Georgia, "Times New Roman", "Noto Serif", serif;
  --card-radius: 12px;
  --card-radius-lg: 16px;
}

/* ─── Графит: тёмная страница и тёмные карточки, золотой акцент ──────────
   Первый шаблон, где тёмные не только страница, но и карточки: --ink здесь
   светлый, а --surface тёмный. Всё, что в меню нарисовано на белом (подложка
   подробностей блюда, кнопка «закрыть» на ней), перекрашено в конце файла
   отдельными правилами — иначе светлый текст оказался бы на белом. */
[data-theme="graphite"] {
  color-scheme: dark;

  --bg: #121110;
  --bg-deep: #0b0a09;
  --bg-glow: rgba(214, 178, 106, 0.07);
  --surface: #1d1b19;
  --surface-raised: #252320;

  --ink: #f1ebe0;
  --ink-soft: #b3a999;
  --on-bg: #f1ebe0;
  --on-bg-soft: #b3a999;

  --accent: #c9a45c;
  --accent-strong: #d9b873;
  --accent-quiet: #86703f;
  --accent-on-bg: #d9b873;
  --on-accent: #17130c;

  --line: rgba(241, 235, 224, 0.1);
  --line-strong: rgba(241, 235, 224, 0.2);
  --line-bg: rgba(241, 235, 224, 0.1);
  --line-bg-strong: rgba(241, 235, 224, 0.2);

  --footer-bg: #0b0a09;

  --danger: #b4442f;
  --danger-soft: #3a211b;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.5), 0 28px 60px rgba(0, 0, 0, 0.55);

  --font-display: Manrope, "Fixel Text", ui-sans-serif, system-ui, sans-serif;
  --card-radius: 14px;
  --card-radius-lg: 18px;
}

/* ─── Восток: шафран, терракота и глубокая бирюза, засечки ────────────── */
[data-theme="vostok"] {
  --bg: #f1dfbd;
  --bg-deep: #e6cc9f;
  --bg-glow: rgba(255, 243, 214, 0.85);
  --surface: #fff7e4;
  --surface-raised: #fffbf0;

  --ink: #2b1a10;
  --ink-soft: #6b4731;
  --on-bg: #2b1a10;
  --on-bg-soft: #644029;

  --accent: #0e5a5c;
  --accent-strong: #0b4b4d;
  --accent-quiet: #d99a2b;
  --accent-on-bg: #0b4b4d;
  --on-accent: #fff7e4;

  --line: rgba(43, 26, 16, 0.14);
  --line-strong: rgba(43, 26, 16, 0.24);
  --line-bg: rgba(43, 26, 16, 0.16);
  --line-bg-strong: rgba(43, 26, 16, 0.26);

  --footer-bg: color-mix(in srgb, var(--bg-deep) 70%, var(--bg));

  --danger: #a3392a;
  --danger-soft: #f6e0d8;

  --font-display: "Playfair Display", Georgia, "Times New Roman", "Noto Serif", serif;
  --card-radius: 10px;
  --card-radius-lg: 14px;
}

/* ─── Бургер: светлая страница, красный и жёлтый, плотный шрифт ───────── */
[data-theme="burger"] {
  --bg: #fff8e7;
  --bg-deep: #ffe9a8;
  --bg-glow: rgba(255, 255, 255, 0.9);
  --surface: #ffffff;
  --surface-raised: #ffffff;

  --ink: #1c1210;
  --ink-soft: #5a4640;
  --on-bg: #1c1210;
  --on-bg-soft: #5a4640;

  --accent: #d42020;
  --accent-strong: #bd1818;
  --accent-quiet: #ffc61a;
  --accent-on-bg: #bd1818;
  --on-accent: #ffffff;

  --line: rgba(28, 18, 16, 0.16);
  --line-strong: rgba(28, 18, 16, 0.3);
  --line-bg: rgba(28, 18, 16, 0.16);
  --line-bg-strong: rgba(28, 18, 16, 0.3);

  --footer-bg: #ffe9a8;

  --danger: #a82a1a;
  --danger-soft: #fde3de;

  --font-display: Unbounded, "Fixel Display", ui-sans-serif, system-ui, sans-serif;
  --card-radius: 16px;
  --card-radius-lg: 20px;
}

/* ─── Сакура: пудрово-розовый и ягодный текст ─────────────────────────── */
[data-theme="sakura"] {
  --bg: #fbe8ee;
  --bg-deep: #f4d3de;
  --bg-glow: rgba(255, 255, 255, 0.85);
  --surface: #fff6f8;
  --surface-raised: #ffffff;

  --ink: #3b1226;
  --ink-soft: #7a4a5e;
  --on-bg: #3b1226;
  --on-bg-soft: #7a4258;

  --accent: #9d2a58;
  --accent-strong: #8a2250;
  --accent-quiet: #e59bb5;
  --accent-on-bg: #8a2250;
  --on-accent: #fff7f9;

  --line: rgba(59, 18, 38, 0.11);
  --line-strong: rgba(59, 18, 38, 0.2);
  --line-bg: rgba(59, 18, 38, 0.12);
  --line-bg-strong: rgba(59, 18, 38, 0.22);

  --footer-bg: color-mix(in srgb, var(--surface) 70%, var(--bg));

  --danger: #a33a2a;
  --danger-soft: #f8e4e0;

  --font-display: Lora, Georgia, "Times New Roman", "Noto Serif", serif;
  --card-radius: 28px;
  --card-radius-lg: 34px;
}

/* ─── Бриз: белое и небесно-голубое, тёмно-синий текст ────────────────── */
[data-theme="briz"] {
  --bg: #e6f3fb;
  --bg-deep: #cfe6f4;
  --bg-glow: rgba(255, 255, 255, 0.92);
  --surface: #ffffff;
  --surface-raised: #ffffff;

  --ink: #0c2340;
  --ink-soft: #40597a;
  --on-bg: #0c2340;
  --on-bg-soft: #3c5676;

  --accent: #0b5fa5;
  --accent-strong: #0a4f8a;
  --accent-quiet: #7cc0e8;
  --accent-on-bg: #0a4f8a;
  --on-accent: #ffffff;

  --line: rgba(12, 35, 64, 0.1);
  --line-strong: rgba(12, 35, 64, 0.18);
  --line-bg: rgba(12, 35, 64, 0.12);
  --line-bg-strong: rgba(12, 35, 64, 0.2);

  --footer-bg: color-mix(in srgb, var(--bg-deep) 60%, var(--bg));

  --danger: #b23a28;
  --danger-soft: #fbe6e1;

  --font-display: Montserrat, "Fixel Display", ui-sans-serif, system-ui, sans-serif;
  --card-radius: 22px;
  --card-radius-lg: 28px;
}

/* ─── Поправки шаблонов к общим правилам ─────────────────────────────────
   Только то, что нельзя выразить переменными. */

/* Графит: подложка подробностей блюда остаётся белой (снимки сняты на
   белом), поэтому текст на ней тёмный, а не светлый, как на карточках. */
[data-theme="graphite"] .sheet__watermark {
  color: #ece6d8;
}

/* Бургер: плотная тень-подложка вместо мягкой — как на упаковке. */
[data-theme="burger"] .card {
  box-shadow:
    0 0 0 2px var(--ink),
    4px 4px 0 var(--ink);
}
@media (hover: hover) {
  [data-theme="burger"] .card:hover {
    box-shadow:
      0 0 0 2px var(--ink),
      6px 6px 0 var(--accent);
  }
}
[data-theme="burger"] .card__name,
[data-theme="burger"] .card__price {
  font-weight: 700;
}

/* Восток: у Playfair цифры по умолчанию «старинные» (разной высоты) — в цене
   они читаются как опечатка, поэтому ставим ровные. */
[data-theme="vostok"] .card__price,
[data-theme="vostok"] .sheet__price,
[data-theme="vostok"] .pm-card__price {
  font-variant-numeric: lining-nums;
}

/* ─── Масштаб текста и скругления владельца ──────────────────────────── */
/* Атрибуты ставит сервер (pageChrome.ts) и скрипт (typography.js). Двойной
   селектор по атрибуту нужен, чтобы перебить и шаблон, и data-corners из
   menu.css, который подключён позже. Скругления — одна лесенка: карточки,
   плашки, шторка и баннеры меняются вместе. */
[data-text-scale][data-text-scale="0.9"] { --text-scale: 0.9; }
[data-text-scale][data-text-scale="0.95"] { --text-scale: 0.95; }
[data-text-scale][data-text-scale="1.05"] { --text-scale: 1.05; }
[data-text-scale][data-text-scale="1.1"] { --text-scale: 1.1; }
[data-text-scale][data-text-scale="1.15"] { --text-scale: 1.15; }
[data-radius][data-radius="8"] { --card-radius: 8px; --card-radius-lg: 12px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --chip-radius: 8px; }
[data-radius][data-radius="12"] { --card-radius: 12px; --card-radius-lg: 16px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --chip-radius: 12px; }
[data-radius][data-radius="16"] { --card-radius: 16px; --card-radius-lg: 20px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 20px; --chip-radius: 16px; }
[data-radius][data-radius="20"] { --card-radius: 20px; --card-radius-lg: 24px; --radius-sm: 12px; --radius-md: 20px; --radius-lg: 24px; --chip-radius: 22px; }
[data-radius][data-radius="24"] { --card-radius: 24px; --card-radius-lg: 28px; --radius-sm: 14px; --radius-md: 24px; --radius-lg: 28px; --chip-radius: 24px; }