/* Связи · бренд-система Афиши Природы — ОДИН файл тем для всех «Связей» мероприятий (docs/brand-themes.md).
   Источник: afisha.priroda-eco.ru/static/style.css (код /opt/priroda-afisha, снято 28.10.2026) — значения тем 1:1.
   Две оси, как на Афише:
     тема  — data-skin на <html>: "1" «Сцена» (чёрный и цвета форматов), "2" «Природа» (брендбук: малахит, мрамор, облепиха);
     режим — data-theme (выбор: light | dark, нет атрибута = как в системе) → data-scheme (итог: light | dark).
   Атрибуты ставит assets/theme.js в <head> до отрисовки (тема по умолчанию — из конфига события, assets/event.config.js).
   Слои токенов: 1) бренд (как на Афише) → 2) квест «Сказочный лес» (--q-*) → 3) экран зала (--scr-*). Компоненты читают
   только токены; цвета в app.css/screen.html — лишь фиксированные метки клубов и растровые иллюстрации. Арок нет. */
@font-face { font-family: "Wix Madefor Display"; src: url(fonts/WixMadeforDisplay-Variable.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }

/* ═════════ 1. Бренд: тема 1 «Сцена», светлый режим (Афиша :root) ═════════ */
:root {
  --ink: #0b0b10; --ink-2: #17171f; --ink-3: #24242e;              /* сцена: шапка, шапка события, тёмные полосы */
  --on-ink: #fff; --on-ink-2: rgb(255 255 255 / 72%); --on-ink-line: rgb(255 255 255 / 16%);
  --bg: #fff; --bg-2: #f3f3f6; --surface: #fff; --text: #0b0b10; --text-2: #4d4d5a;
  --line: rgb(11 11 16 / 12%); --line-strong: rgb(11 11 16 / 40%); --card-ring: rgb(11 11 16 / 8%);
  --hot: #c2405e; --hot-on-ink: #f2a0b3; --bad-text: #c81e33; --acc: #e0708c; --ok: #0b7a50; --focus: #0b0b10;
  --btn: var(--text); --on-btn: var(--bg);                          /* главная кнопка = .btn--ink Афиши */
  --sun: linear-gradient(100deg, #e8a838, #e5844f 30%, #e27d98 55%, #a68bdb 80%, #7db9e3);
  --logo-sub: var(--sun); --on-logo-sub: #0b0b10;                   /* плашка продукта у словесного знака: «афиша» / «связи» */
  --fest: #cfff93; --on-fest: #0b0b10;                              /* цвет формата «Праздник» (party) — /theme.css Афиши (админка) */
  --shadow: 0 1px 2px rgb(0 0 0 / 5%), 0 8px 28px rgb(0 0 0 / 8%);
  --r-s: 10px; --r-m: 16px; --r-l: 24px; --pill: 999px;
  --t-xs: 12px; --t-s: 14px; --t-m: 16px; --t-l: 18px; --t-xl: 22px; --t-h2: 32px; --t-h1: 34px;
  --font: "Wix Madefor Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --top-h: 60px; --dock-h: 64px;
  --sw-a: #0b0b10; --sw-b: #e8a838; --sw-c: #e27d98; --sw-d: #7db9e3; /* образец темы в переключателе */
  color-scheme: light;
}
/* тема 1, тёмный режим (Афиша :root[data-theme="dark"]) */
:root[data-scheme="dark"] {
  --bg: #17171f; --bg-2: #20202a; --surface: #20202a; --text: #f4f4f7; --text-2: #a9a9b6;
  --line: rgb(255 255 255 / 12%); --line-strong: rgb(255 255 255 / 40%); --card-ring: rgb(255 255 255 / 10%);
  --hot: #f2a0b3; --bad-text: #ff8193; --ok: #4fd6a0; --focus: #fff;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 30px rgb(0 0 0 / 40%);
  color-scheme: dark;
}
/* тема 2 «Природа» по брендбуку, светлый режим (Афиша :root[data-skin="2"]) */
:root[data-skin="2"] {
  --ink: #325a50; --ink-2: #284a41; --ink-3: #417a68;              /* Тёмный / Светлый малахит */
  --on-ink: #fff; --on-ink-2: rgb(255 255 255 / 76%); --on-ink-line: rgb(255 255 255 / 20%);
  --bg: #f8f4f0; --bg-2: #efe8e0; --surface: #fff; --text: #1f3a33; --text-2: #46685d; /* Мрамор, Снег */
  --line: rgb(50 90 80 / 15%); --line-strong: rgb(50 90 80 / 45%); --card-ring: rgb(50 90 80 / 10%);
  --hot: #b0451a; --hot-on-ink: #f5c9a8; --acc: #f5a24c; --ok: #2d7a52; --focus: #325a50;
  --cta: #f5a24c; --cta-hover: #f7b36a; --on-cta: #1a1a18;          /* Облепиха, 8,4:1 с тёмным текстом */
  --btn: var(--cta); --on-btn: var(--on-cta);
  --bronze: #bfae9e; --sand: #d6c6b5;                                /* Бронза, Морской песок */
  --sun: linear-gradient(100deg, #f5a24c, #ffb766 50%, #d6c6b5);
  --logo-sub: var(--sand); --on-logo-sub: #23463f;
  --fest: #f5a24c; --on-fest: #1a1a18;
  --shadow: 0 1px 2px rgb(31 58 51 / 6%), 0 10px 30px rgb(31 58 51 / 9%);
  --sw-a: #325a50; --sw-b: #f8f4f0; --sw-c: #bfae9e; --sw-d: #f5a24c;
  color-scheme: light;
}
/* тема 2, тёмный режим (Афиша :root[data-skin="2"][data-scheme="dark"]) */
:root[data-skin="2"][data-scheme="dark"] {
  --ink: #0c1a17; --ink-2: #132621; --ink-3: #213c35;
  --on-ink-2: rgb(248 244 240 / 74%); --on-ink-line: rgb(214 198 181 / 18%);
  --bg: #11221e; --bg-2: #1b3530; --surface: #172c27; --text: #f8f4f0; --text-2: var(--sand);
  --line: rgb(214 198 181 / 15%); --line-strong: rgb(214 198 181 / 45%); --card-ring: rgb(214 198 181 / 10%);
  --hot: #f2b48e; --hot-on-ink: #f2b48e; --ok: #8fd3ae; --focus: var(--sand);
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 30px rgb(0 0 0 / 40%);
  color-scheme: dark;
}

/* ═════════ 2. Квест «Сказочный лес» (--q-*) ═════════
   Сцена квеста повторяет логику Афиши: поверх иллюстраций — всегда тёмная «сцена» (--q-scene*), остальное — страница
   темы (--q-bg/--q-fg). Акцент: тема 1 — цвет формата «Праздник» (лайм), тема 2 — Облепиха. --q-*-text — для текста. */
:root {
  --q-bg: #fff; --q-bg-2: #f3f3f6; --q-glow: #eef8df;
  --q-fg: #0b0b10; --q-fg-2: #4d4d5a;
  --q-acc: #cfff93; --q-acc-2: #bdf06f; --q-on-acc: #0b0b10; --q-acc-text: #3f6d07;
  --q-ok: #0b7a50; --q-on-ok: #fff; --q-ok-text: #0b7a50;
  --q-gold: #d9a520; --q-gold-text: #7f5d00;
  --q-bubble: #f3f3f6; --q-on-bubble: #0b0b10;
  --q-scene: #0b0b10; --q-scene-fg: #f4f4f7; --q-scene-fg-2: #c4c4cf; --q-scene-acc: #cfff93;
  --q-ring: #5d9d1f;                                                /* «сейчас» на тропе: ≥3:1 к фону */
  --here: #c2405e; --on-here: #fff;                                 /* «задание сейчас / вы здесь» на схеме — тёмно-розовый Афиши (--hot темы 1), во всех темах; белый текст 5:1 */
  --fairy: url(img/quest/deco/corner-bl.webp); --fairy-tr: url(img/quest/deco/corner-tr.webp); /* сказочный растр по углам квестовых блоков */
}
:root[data-scheme="dark"] {
  --q-bg: #0b0b10; --q-bg-2: #17171f; --q-glow: #22263a;
  --q-fg: #f4f4f7; --q-fg-2: #b4b4c0;
  --q-acc: #cfff93; --q-acc-2: #dcfcb0; --q-on-acc: #0b0b10; --q-acc-text: #cfff93;
  --q-ok: #4fd6a0; --q-on-ok: #0b0b10; --q-ok-text: #4fd6a0;
  --q-gold: #f3d27a; --q-gold-text: #f3d27a;
  --q-bubble: #f4f4f7; --q-on-bubble: #0b0b10;
  --q-ring: #cfff93;
}
:root[data-skin="2"] {
  --q-bg: #f8f4f0; --q-bg-2: #efe8e0; --q-glow: #dde9e2;
  --q-fg: #1f3a33; --q-fg-2: #46685d;
  --q-acc: #f5a24c; --q-acc-2: #f7b36a; --q-on-acc: #1a1a18; --q-acc-text: #974a0f;
  --q-ok: #2d7a52; --q-on-ok: #fff; --q-ok-text: #256845;
  --q-gold: #c99a2e; --q-gold-text: #7f5d00;
  --q-bubble: #fff; --q-on-bubble: #1f3a33;
  --q-scene: #0e1d18; --q-scene-fg: #f6eddc; --q-scene-fg-2: #d9cfbd; --q-scene-acc: #ffb766;
  --q-ring: #d97e1f;
}
:root[data-skin="2"][data-scheme="dark"] {
  --q-bg: #0e1d18; --q-bg-2: #15291f; --q-glow: #1f3a2e;
  --q-fg: #f6eddc; --q-fg-2: #cfc5b2;
  --q-acc: #f5a24c; --q-acc-2: #ffb766; --q-on-acc: #1a1a18; --q-acc-text: #ffb766;
  --q-ok: #8fb08a; --q-on-ok: #10201a; --q-ok-text: #a9c8a3;
  --q-gold: #e8c46a; --q-gold-text: #f3d27a;
  --q-bubble: #f6eddc; --q-on-bubble: #23302a;
  --q-ring: #f5a24c;
}

/* ═════════ 3. Экран зала (screen.html): фон-сцена и колесо ═════════ */
:root { --scr-bg: radial-gradient(1400px 900px at 70% 40%, #f3f3f6 0, #fff 70%); --scr-row: var(--bg-2); --scr-ring: var(--ink); --scr-ring-2: var(--fest); }
:root[data-scheme="dark"] { --scr-bg: radial-gradient(1400px 900px at 70% 40%, #24242e 0, #0b0b10 70%); --scr-row: rgb(255 255 255 / 7%); --scr-ring: #24242e; --scr-ring-2: var(--fest); }
:root[data-skin="2"] { --scr-bg: radial-gradient(1400px 900px at 70% 40%, #fff 0, #f8f4f0 70%); --scr-row: #efe8e0; --scr-ring: #325a50; --scr-ring-2: #f5a24c; }
:root[data-skin="2"][data-scheme="dark"] { --scr-bg: radial-gradient(1400px 900px at 70% 40%, #1f4038 0, #0c1a17 70%); --scr-row: rgb(255 255 255 / 7%); --scr-ring: #1a332d; --scr-ring-2: #f5a24c; }

/* скрытый текст для экранных дикторов (общий для приложения и экрана зала) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ═════════ Бренд-компоненты семейства: словесный знак и переключатель «Оформление» (как в шапке Афиши) ═════════ */
.logo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: inherit; text-decoration: none; }
.logo__word { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 15px; }
.logo__sub { display: inline-block; font-size: 12px; font-weight: 750; padding: 3px 9px; border-radius: var(--pill); background: var(--logo-sub); color: var(--on-logo-sub); white-space: nowrap; }
/* соседний продукт семейства — та же плашка контуром: «ПРИРОДА [связи] [афиша ↗]» */
.fam { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px; font-size: 12px; font-weight: 700; color: var(--on-ink-2); text-decoration: none; white-space: nowrap; }
.fam > span:not(.sr) { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 9px; border-radius: var(--pill); box-shadow: inset 0 0 0 1px var(--on-ink-line); }
.fam:hover > span:not(.sr) { color: var(--on-ink); box-shadow: inset 0 0 0 1px var(--on-ink-2); }
.fam svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.theme__dot { width: 24px; height: 24px; flex: none; border-radius: 50%; background: linear-gradient(135deg, #0b0b10 50%, #fff 50%); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 60%), 0 0 0 1px rgb(255 255 255 / 30%); }
:root[data-skin="2"] .theme__dot { background: linear-gradient(135deg, #325a50 50%, #f5a24c 50%); }
.theme__pop { position: fixed; z-index: 95; max-height: calc(100dvh - 80px); overflow-y: auto; width: min(368px, calc(100vw - 24px)); padding: 14px; border-radius: var(--r-l); background: var(--bg); color: var(--text); box-shadow: 0 0 0 1px var(--line), 0 18px 50px rgb(0 0 0 / 28%); text-align: left; }
.theme__h { margin: 2px 4px 8px; font-size: var(--t-xs); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.theme__skins + .theme__h { margin-top: 16px; }
.theme__skins { display: grid; gap: 6px; }
.theme__skin { display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 12px; align-items: center; width: 100%; min-height: 62px; padding: 8px 12px 8px 8px; border: 0; border-radius: var(--r-m); background: var(--bg-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: box-shadow .15s, background-color .15s; }
.theme__skin:hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.theme__skin[aria-pressed="true"] { background: var(--bg); box-shadow: inset 0 0 0 2px var(--text); }
.theme__txt b { display: block; font-size: var(--t-s); font-weight: 750; line-height: 1.3; }
.theme__txt small { display: block; margin-top: 1px; font-size: 13px; line-height: 1.35; color: var(--text-2); }
.theme__ok { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.theme__skin[aria-pressed="true"] .theme__ok { opacity: 1; }
.theme__sw { position: relative; display: block; width: 44px; height: 44px; border-radius: var(--r-s); overflow: hidden; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%); }
.theme__sw i { position: absolute; left: 7px; height: 5px; border-radius: var(--pill); }
.theme__sw i:nth-child(1) { top: 11px; right: 7px; } .theme__sw i:nth-child(2) { top: 20px; right: 14px; } .theme__sw i:nth-child(3) { top: 29px; right: 20px; }
.theme__sw--1 { background: #0b0b10; } .theme__sw--1 i:nth-child(1) { background: #e8a838; } .theme__sw--1 i:nth-child(2) { background: #e27d98; } .theme__sw--1 i:nth-child(3) { background: #7db9e3; }
.theme__sw--2 { background: #325a50; } .theme__sw--2 i:nth-child(1) { background: #f8f4f0; } .theme__sw--2 i:nth-child(2) { background: #bfae9e; } .theme__sw--2 i:nth-child(3) { background: #f5a24c; }
.theme__modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--r-m); background: var(--bg-2); }
.theme__mode { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; padding: 6px 4px; border: 0; border-radius: 12px; background: none; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; transition: background-color .15s, color .15s; }
.theme__mode svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme__mode:hover { color: var(--text); }
.theme__mode[aria-pressed="true"] { background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--line), 0 1px 3px rgb(0 0 0 / 12%); }
.theme__pop :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .theme__pop:not([hidden]) { animation: theme-in .16s ease-out; } }
@keyframes theme-in { from { opacity: 0; transform: translateY(-6px); } }