/* ══════════════════════════════════════════════════════════════════════
   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="peony"] {
  --bg: #f7e6ea;
  --bg-deep: #ead4d9;
  --bg-glow: rgba(255, 252, 252, 0.88);
  --surface: #fffafb;
  --surface-raised: #ffffff;

  --ink: #35161f;
  --ink-soft: #6b4350;
  --on-bg: #35161f;
  --on-bg-soft: #6b4350;

  --accent: #b0325c;
  --accent-strong: #9a2850;
  --accent-quiet: #e7a1b6;
  --accent-on-bg: #9a2850;
  --on-accent: #ffffff;

  --line: rgba(53, 22, 31, 0.11);
  --line-strong: rgba(53, 22, 31, 0.2);
  --line-bg: rgba(53, 22, 31, 0.12);
  --line-bg-strong: rgba(53, 22, 31, 0.22);

  --footer-bg: #efd3da;

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

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

/* ─── Эвкалипт: серо-зелёный, свежий и спокойный ──────────────────────── */
[data-theme="eucalyptus"] {
  --bg: #e6eee8;
  --bg-deep: #d6e3da;
  --bg-glow: rgba(255, 255, 255, 0.85);
  --surface: #f8fbf8;
  --surface-raised: #ffffff;

  --ink: #16291f;
  --ink-soft: #475e51;
  --on-bg: #16291f;
  --on-bg-soft: #435a4d;

  --accent: #3f7a5e;
  --accent-strong: #2f6048;
  --accent-quiet: #9cc4b0;
  --accent-on-bg: #2f6048;
  --on-accent: #ffffff;

  --line: rgba(22, 41, 31, 0.11);
  --line-strong: rgba(22, 41, 31, 0.2);
  --line-bg: rgba(22, 41, 31, 0.12);
  --line-bg-strong: rgba(22, 41, 31, 0.22);

  --footer-bg: #d5e3da;

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

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

/* ─── Лаванда: сиреневый и глубокий фиолетовый ────────────────────────── */
[data-theme="lavender"] {
  --bg: #ece8f6;
  --bg-deep: #ddd6ee;
  --bg-glow: rgba(255, 255, 255, 0.88);
  --surface: #fbfaff;
  --surface-raised: #ffffff;

  --ink: #241a3a;
  --ink-soft: #5a4d78;
  --on-bg: #241a3a;
  --on-bg-soft: #54486f;

  --accent: #6d4fb3;
  --accent-strong: #5a3f9c;
  --accent-quiet: #b7a6e0;
  --accent-on-bg: #573c98;
  --on-accent: #ffffff;

  --line: rgba(36, 26, 58, 0.11);
  --line-strong: rgba(36, 26, 58, 0.2);
  --line-bg: rgba(36, 26, 58, 0.12);
  --line-bg-strong: rgba(36, 26, 58, 0.22);

  --footer-bg: #ddd6ee;

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

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

/* ─── Крафт: упаковочная бумага, шпагат и ржавчина ────────────────────── */
[data-theme="kraft"] {
  --bg: #e9dcc6;
  --bg-deep: #dccaa9;
  --bg-glow: rgba(255, 250, 238, 0.8);
  --surface: #f8f1e3;
  --surface-raised: #fffaf0;

  --ink: #2e2417;
  --ink-soft: #5f4e38;
  --on-bg: #2e2417;
  --on-bg-soft: #574731;

  --accent: #9a5a2c;
  --accent-strong: #85491f;
  --accent-quiet: #c8a173;
  --accent-on-bg: #7d441b;
  --on-accent: #fffaf0;

  --line: rgba(46, 36, 23, 0.14);
  --line-strong: rgba(46, 36, 23, 0.24);
  --line-bg: rgba(46, 36, 23, 0.16);
  --line-bg-strong: rgba(46, 36, 23, 0.26);

  --footer-bg: #dccaa9;

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

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

/* ─── Ночная роза: тёмная страница и тёмные карточки, розовый акцент ──── */
[data-theme="nightrose"] {
  color-scheme: dark;

  --bg: #1d1217;
  --bg-deep: #140c10;
  --bg-glow: rgba(216, 100, 138, 0.07);
  --surface: #2a1a22;
  --surface-raised: #34202a;

  --ink: #f6e9ee;
  --ink-soft: #c9a9b6;
  --on-bg: #f6e9ee;
  --on-bg-soft: #c9a9b6;

  --accent: #d8648a;
  --accent-strong: #ec86a6;
  --accent-quiet: #8c4a63;
  --accent-on-bg: #ec86a6;
  --on-accent: #1d0a12;

  --line: rgba(246, 233, 238, 0.1);
  --line-strong: rgba(246, 233, 238, 0.2);
  --line-bg: rgba(246, 233, 238, 0.1);
  --line-bg-strong: rgba(246, 233, 238, 0.2);

  --footer-bg: #140c10;

  --danger: #e0735c;
  --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: "Cormorant Garamond", Georgia, "Times New Roman", "Noto Serif", serif;
  --card-radius: 16px;
  --card-radius-lg: 22px;
}

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

/* Ночная роза: как у «Графита», подложка подробностей остаётся белой, поэтому
   текст на ней тёмный, а не светлый, как на тёмных карточках. */
[data-theme="nightrose"] .sheet__hero {
  --hero-ink: #35161f;
  --hero-ink-soft: #6b4350;
  --hero-accent: #9a2850;
}

/* Крафт: тонкий край кадра, как у бумажной бирки; цифры цены — ровные. */
[data-theme="kraft"] .card__media {
  box-shadow: 0 0 0 1px var(--line-strong);
}
[data-theme="kraft"] .card__price {
  font-variant-numeric: lining-nums;
  letter-spacing: 0.01em;
}

/* Названия на карточках — шрифтом заголовков, 600: у «Пиона» и «Ночной розы»
   засечки, и обычный вес тонкий. */
[data-theme="nightrose"] .card__name,
[data-theme="nightrose"] .sheet__title {
  font-weight: 600;
  letter-spacing: 0.005em;
}
[data-theme="peony"] .card__name {
  font-weight: 600;
}

/* Графит: подложка подробностей блюда остаётся белой (снимки сняты на
   белом), поэтому текст на ней тёмный, а не светлый, как на карточках. */
[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; }