/* Подбор цветов — концепт для обсуждения с заказчиком. Посетителю не показывается: работает только по ссылке ?p=<id>
   или из концепт-борда (<html data-palette="<id>">). Без него сайт — в фирменных темах Пергамент и Ночь.

   Цвета заказчика:
     Палитра 1 — тёмно-синий #0A1430, Electric Blue #0297DE, оранжевый #FC734D
     Палитра 2 — небесно-голубой #0593C6, белый #FCFFFF, ярко-розовый #DB3996
   Палитры заказчика дают только по одной основе, вторая тема достроена из их же цветов.
     smes — все шесть вместе: основа белая и тёмно-синяя, чернила голубые, кнопка — переход оранжевого в розовый
     p1   — только Палитра 1: тёмная — на тёмно-синем, светлая — на холодном белом
     p2   — только Палитра 2: светлая — на белом, тёмная — на глубоком оттенке голубого

   Точные цвета заказчика идут в заливки, чернила и линии. Там, где цвет становится мелким текстом, он чуть темнее
   (--accent на светлом), иначе текст плохо читается. Логотип перекрашен только для примера. */

/* ── Светлая основа: общее ────────────────────────────────────────── */
html[data-palette][data-mode="light"] {
  --accent-ink: #FFFFFF;
  --ok: #0A8363; --ok-soft: #DDF3EC;
  --warn: #A96800; --warn-soft: #FBEFD6;
  --bad: #C42B3A; --bad-soft: #FADFE2;
  --surface: #FFFFFF;
  --shadow: 0 1px 2px rgba(10, 20, 48, .05), 0 6px 18px -8px rgba(10, 20, 48, .16);
  --shadow-lg: 0 30px 70px -30px rgba(10, 20, 48, .34), 0 2px 6px rgba(10, 20, 48, .06);
  --g-hang: 0 1px 2px rgba(10, 20, 48, .06), 0 40px 80px -46px rgba(10, 20, 48, .4);
  --g-hang-sm: 0 1px 2px rgba(10, 20, 48, .05), 0 24px 44px -32px rgba(10, 20, 48, .38);
  --glass-bg: rgba(255, 255, 255, .74);
  --glass-line: rgba(10, 20, 48, .1);
  --app-bg: var(--surface);
  --app-side: var(--surface-2);
  --app-bar: var(--bg-2);
  color-scheme: light;
}
/* ── Тёмная основа: общее ─────────────────────────────────────────── */
html[data-palette][data-mode="dark"] {
  --ok: #45D2A4; --ok-soft: rgba(69, 210, 164, .14);
  --warn: #F5BE55; --warn-soft: rgba(245, 190, 85, .14);
  --bad: #FF8291; --bad-soft: rgba(255, 130, 145, .14);
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 40px 80px -30px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .03);
  --glass-line: rgba(252, 255, 255, .1);
  color-scheme: dark;
}

/* ── Смесь: день ──────────────────────────────────────────────────── */
html[data-palette="smes"][data-mode="light"] {
  --bg: #FCFFFF; --bg-2: #EDF6FB; --surface-2: #F1F8FC;
  --line: #D8E7F0; --line-2: #B9D3E2;
  --text: #0A1430; --text-2: #34415F; --muted: #5E6C88;
  --accent: #047FAB; --accent-2: #C92C84; --accent-soft: #E2F3FA;
  --c1: #0593C6; --c2: #FC734D; --c3: #DB3996; --c4: #0A1430; --c5: #7FB8D6;
  --gold: #DB3996; --gold-soft: rgba(219, 57, 150, .12);
  --sign: #A7BCCB; --glow: rgba(5, 147, 198, .2);
  --top-bg: rgba(252, 255, 255, .84);
  --logo-ink: #0A1430; --logo-sign: #A7BCCB; --logo-pulse: #DB3996;
  --cta: linear-gradient(100deg, #FC734D, #DB3996); --cta-ink: #0A1430;
  --ink-acc: #0593C6; --ink-deep: #0A1430; --ink-gold: #DB3996; --ink-spot: #FC734D; --ink-spot-k: .42; --ink-gold-k: .3;
}
/* ── Смесь: ночь ──────────────────────────────────────────────────── */
html[data-palette="smes"][data-mode="dark"] {
  --bg: #0A1430; --bg-2: #0E1B3E; --surface: #12214A; --surface-2: #182A58;
  --line: #233563; --line-2: #34497E;
  --text: #FCFFFF; --text-2: #C9D5E9; --muted: #8E9EBE;
  --accent: #22ACEA; --accent-2: #F172B6; --accent-ink: #0A1430; --accent-soft: rgba(5, 147, 198, .18);
  --c1: #22ACEA; --c2: #FC734D; --c3: #F172B6; --c4: #9FDCF7; --c5: #C9D5E9;
  --gold: #FC734D; --gold-soft: rgba(252, 115, 77, .14);
  --sign: #4A5C86; --glow: rgba(2, 151, 222, .28);
  --glass-bg: rgba(18, 33, 74, .58);
  --top-bg: rgba(10, 20, 48, .82);
  --logo-ink: #FCFFFF; --logo-sign: #4A5C86; --logo-pulse: #FC734D;
  --app-bg: #0E1B3E; --app-side: #0B1636; --app-bar: #091230;
  --cta: linear-gradient(100deg, #FC734D, #DB3996); --cta-ink: #0A1430;
  --ink-acc: #0297DE; --ink-deep: #FCFFFF; --ink-gold: #FC734D; --ink-spot: #DB3996; --ink-spot-k: .55;
}

/* ── Палитра 1: светлая (основа достроена: холодный белый) ────────── */
html[data-palette="p1"][data-mode="light"] {
  --bg: #F6FAFD; --bg-2: #E9F1F8; --surface-2: #F0F6FB;
  --line: #D5E2ED; --line-2: #B7CBDC;
  --text: #0A1430; --text-2: #34415F; --muted: #5E6C88;
  --accent: #0278B2; --accent-2: #D9532D; --accent-soft: #E0F1FB;
  --c1: #0297DE; --c2: #FC734D; --c3: #0A1430; --c4: #7FB6DC; --c5: #F9B199;
  --gold: #E85F38; --gold-soft: rgba(252, 115, 77, .14);
  --sign: #A9BBCC; --glow: rgba(2, 151, 222, .2);
  --top-bg: rgba(246, 250, 253, .84);
  --logo-ink: #0A1430; --logo-sign: #A9BBCC; --logo-pulse: #FC734D;
  --cta: #FC734D; --cta-ink: #0A1430;
  --ink-acc: #0297DE; --ink-deep: #0A1430; --ink-gold: #FC734D; --ink-gold-k: .34;
}
/* ── Палитра 1: тёмная ────────────────────────────────────────────── */
html[data-palette="p1"][data-mode="dark"] {
  --bg: #0A1430; --bg-2: #0E1B3E; --surface: #12214A; --surface-2: #182A58;
  --line: #233563; --line-2: #34497E;
  --text: #F4F8FD; --text-2: #C9D5E9; --muted: #8E9EBE;
  --accent: #0297DE; --accent-2: #FC734D; --accent-ink: #0A1430; --accent-soft: rgba(2, 151, 222, .18);
  --c1: #0297DE; --c2: #FC734D; --c3: #8FD0F2; --c4: #F9B199; --c5: #C9D5E9;
  --gold: #FC734D; --gold-soft: rgba(252, 115, 77, .14);
  --sign: #4A5C86; --glow: rgba(2, 151, 222, .28);
  --glass-bg: rgba(18, 33, 74, .58);
  --top-bg: rgba(10, 20, 48, .82);
  --logo-ink: #F4F8FD; --logo-sign: #4A5C86; --logo-pulse: #FC734D;
  --app-bg: #0E1B3E; --app-side: #0B1636; --app-bar: #091230;
  --cta: #FC734D; --cta-ink: #0A1430;
  --ink-acc: #0297DE; --ink-deep: #F4F8FD; --ink-gold: #FC734D;
}

/* ── Палитра 2: светлая ───────────────────────────────────────────── */
html[data-palette="p2"][data-mode="light"] {
  --bg: #FCFFFF; --bg-2: #EEF8FB; --surface-2: #F2F9FC;
  --line: #D6E9F0; --line-2: #B6D6E2;
  --text: #0B2A38; --text-2: #33505E; --muted: #5A7683;
  --accent: #047FAB; --accent-2: #C92C84; --accent-soft: #E0F3FA;
  --c1: #0593C6; --c2: #DB3996; --c3: #0B2A38; --c4: #84C6DE; --c5: #EFA3CD;
  --gold: #DB3996; --gold-soft: rgba(219, 57, 150, .12);
  --sign: #A6C2CE; --glow: rgba(5, 147, 198, .2);
  --top-bg: rgba(252, 255, 255, .84);
  --logo-ink: #0B2A38; --logo-sign: #A6C2CE; --logo-pulse: #DB3996;
  --cta: #D02F8A; --cta-ink: #FFFFFF;
  --ink-acc: #0593C6; --ink-deep: #0B2A38; --ink-gold: #DB3996; --ink-gold-k: .32;
}
/* ── Палитра 2: тёмная (основа достроена: глубокий оттенок голубого) ─ */
html[data-palette="p2"][data-mode="dark"] {
  --bg: #06202C; --bg-2: #0A2A38; --surface: #0E3344; --surface-2: #133D50;
  --line: #1B4A60; --line-2: #2A6079;
  --text: #FCFFFF; --text-2: #C4DDE7; --muted: #82A6B5;
  --accent: #14A6DB; --accent-2: #F172B6; --accent-ink: #06202C; --accent-soft: rgba(5, 147, 198, .2);
  --c1: #14A6DB; --c2: #F172B6; --c3: #A6DDF0; --c4: #F7B4D8; --c5: #C4DDE7;
  --gold: #F172B6; --gold-soft: rgba(219, 57, 150, .16);
  --sign: #3D6474; --glow: rgba(5, 147, 198, .3);
  --glass-bg: rgba(14, 51, 68, .6);
  --top-bg: rgba(6, 32, 44, .82);
  --logo-ink: #FCFFFF; --logo-sign: #3D6474; --logo-pulse: #DB3996;
  --app-bg: #0A2A38; --app-side: #072330; --app-bar: #061E2A;
  --cta: #D02F8A; --cta-ink: #FFFFFF;
  --ink-acc: #0593C6; --ink-deep: #FCFFFF; --ink-gold: #DB3996;
}

/* Кабинет не меняем: плоский, без теней и стекла (то же, что в dir-kabinet.css, — палитра выше по весу) */
html[data-palette][data-dir="kabinet"] {
  --shadow: 0 0 0 0 transparent;
  --shadow-lg: 0 28px 56px -40px color-mix(in srgb, var(--text) 38%, transparent);
  --glass-bg: var(--surface);
  --glass-line: var(--line);
}

/* Третий цвет — главная кнопка сайта. Внутри окон продуктов кнопки остаются в основном цвете. */
html[data-palette] .btn-pri { background: var(--cta); border-color: transparent; color: var(--cta-ink); }
html[data-palette] .btn-pri:hover { background: var(--cta); border-color: transparent; filter: brightness(1.07) saturate(1.05); }
html[data-palette] .btn-pri .badge { background: var(--cta-ink); color: var(--bg); }
html[data-palette] .app .btn-pri { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); filter: none; }
html[data-palette] .app .btn-pri:hover { background: color-mix(in srgb, var(--accent) 88%, var(--text)); }
html[data-palette] .app .btn-pri .badge { background: var(--accent-ink); color: var(--accent); }

/* Смесь: в главном заголовке голубой перетекает в розовый или оранжевый — как в чернилах */
html[data-palette="smes"] .hero-title em {
  background: linear-gradient(95deg, var(--ink-acc), var(--ink-gold) 92%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none;
  padding: 0 .06em .14em 0; margin-right: -.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}