/* ══════════════════════════════════════════════════════════════════════════
   RAT KING — палитра и тема. ЕДИНЫЙ ИСТОЧНИК.

   До этого файла токены были скопированы в четыре шаблона лендинга и ещё
   в пяток старых страниц, причём копии успели разъехаться: на лендинге
   акцент оранжевый (#f97316) и текст #f4f2f7, а на /privacy, /guide,
   /contacts, /orders и /shop оставалось золото rgba(212,160,23) и текст
   #e2e8f0. У клиента менялись шрифт и палитра при переходе между вкладками.

   Правило: цвет объявляется здесь и только здесь. Страница описывает
   раскладку и свои компоненты, но не заводит собственный :root.

   Подключение:
     <link rel="stylesheet" href="/static/theme.css?v=1">
     <script src="/static/theme.js?v=1"></script>
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Тёмная тема — основная ─────────────────────────────────────────────── */
:root{
  --bg:#0b0a0d; --bg2:#121016; --bg3:#1b1821;
  --card:#131118; --card-2:#1a1721; --card2:#1a1721;
  --card-border:rgba(255,255,255,0.065);
  --card-border-hover:rgba(249,115,22,0.28);
  --border:rgba(255,255,255,0.065); --border2:rgba(255,255,255,0.11);

  /* Акцент разведён на две роли намеренно: --cyan идёт в текст и иконки,
     --accent-fill в заливку кнопок. На светлой теме у них разная светлота,
     иначе либо текст не дотягивает по контрасту, либо заливка выцветает. */
  --cyan:#f97316; --accent-fill:#ea580c; --accent-fill-hi:#fb8a3c;
  --teal:#ea580c; --cyan-dim:rgba(249,115,22,0.10);
  --accent-wash:rgba(249,115,22,0.08);
  --accent-line:rgba(249,115,22,0.18);

  --green:#10b981; --yellow:#f59e0b; --orange:#f59e0b;
  --purple:#a78bfa; --red:#ef4444; --red-soft:#f87171; --blue:#3b82f6;

  --text:#f4f2f7; --text-dim:#b6b1c0; --text-muted:#928c9c;
  --dim:#b6b1c0; --muted:#928c9c;
  --on-accent:#17110a;

  --radius:14px; --radius-sm:10px; --radius-xs:7px;
  --input-bg:rgba(255,255,255,0.04); --input-border:rgba(255,255,255,0.09);

  /* Тени со смещением и мягким размытием — не цветной ореол вокруг блока. */
  --sh-1:0 1px 2px rgba(0,0,0,.34);
  --sh-2:0 6px 18px -4px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.26);
  --sh-3:0 18px 44px -10px rgba(0,0,0,.62), 0 4px 12px rgba(0,0,0,.3);

  --ease:cubic-bezier(.16,1,.3,1);
  --label:rgba(255,255,255,0.46);
  --overlay:rgba(4,3,6,0.68); --overlay-strong:rgba(4,3,6,0.94);
  --nav-bg:rgba(11,10,13,0.94);
  --drop-bg:#17141d;

  --w2:rgba(255,255,255,0.02);  --w3:rgba(255,255,255,0.03);
  --w4:rgba(255,255,255,0.04);  --w5:rgba(255,255,255,0.05);
  --w6:rgba(255,255,255,0.06);  --w7:rgba(255,255,255,0.07);
  --w8:rgba(255,255,255,0.08);  --w9:rgba(255,255,255,0.09);
  --w10:rgba(255,255,255,0.1);  --w12:rgba(255,255,255,0.12);
  --w15:rgba(255,255,255,0.15); --w18:rgba(255,255,255,0.18);
  --w22:rgba(255,255,255,0.22); --w28:rgba(255,255,255,0.28);
  --w35:rgba(255,255,255,0.35); --w45:rgba(255,255,255,0.45);
  --w60:rgba(255,255,255,0.6);
}

/* ── Светлая тема — тёплая бумага ───────────────────────────────────────────
   Подложки НЕ схлопываются в одну плотность: иначе стопка карточек
   превращается в серую кашу вместо ступеней. */
body.theme-light{
  --bg:#f5f3f1; --bg2:#ffffff; --bg3:#ebe7e4;
  --card:#ffffff; --card-2:#faf8f6; --card2:#faf8f6;
  --card-border:rgba(26,20,30,0.10);
  --border:rgba(26,20,30,0.10); --border2:rgba(26,20,30,0.16);

  --cyan:#9c440a; --accent-fill:#ad4a09; --accent-fill-hi:#c2540b;
  --teal:#8f3d08; --cyan-dim:rgba(173,74,9,0.09);
  --accent-wash:rgba(173,74,9,0.07);
  --accent-line:rgba(173,74,9,0.20);

  --green:#06724f; --yellow:#8a5a06; --orange:#8a5a06;
  --red:#c0261f; --red-soft:#b32020; --purple:#6d4bd8; --blue:#1d4ed8;

  --text:#17131c; --text-dim:#453f4d; --text-muted:#5c556a;
  --dim:#453f4d; --muted:#5c556a;
  /* Чистый белый на насыщенном оранжевом бьёт по глазам. Тёплый почти-белый
     мягче и держит 5.2:1 — то же решение, что уже принято в кабинете. */
  --on-accent:#fff5ee;

  --label:rgba(23,19,28,0.64);
  --input-bg:rgba(26,20,30,0.035); --input-border:rgba(26,20,30,0.13);
  --sh-1:0 1px 2px rgba(26,20,30,.07);
  --sh-2:0 6px 18px -4px rgba(26,20,30,.13), 0 2px 6px rgba(26,20,30,.06);
  --sh-3:0 18px 44px -10px rgba(26,20,30,.18), 0 4px 12px rgba(26,20,30,.08);
  --overlay:rgba(26,20,30,0.55); --overlay-strong:rgba(26,20,30,0.88);
  --nav-bg:rgba(255,255,255,0.94);
  --drop-bg:#ffffff;

  --w2:rgba(23,19,28,0.022); --w3:rgba(23,19,28,0.030); --w4:rgba(23,19,28,0.038);
  --w5:rgba(23,19,28,0.045); --w6:rgba(23,19,28,0.052); --w7:rgba(23,19,28,0.058);
  --w8:rgba(23,19,28,0.064); --w9:rgba(23,19,28,0.070); --w10:rgba(23,19,28,0.076);
  --w12:rgba(23,19,28,0.086); --w15:rgba(23,19,28,0.098); --w18:rgba(23,19,28,0.108);
  --w22:rgba(23,19,28,0.120); --w28:rgba(23,19,28,0.135); --w35:rgba(23,19,28,0.150);
  --w45:rgba(23,19,28,0.170); --w60:rgba(23,19,28,0.190);
}

/* ── Общие поверхности старых страниц ──────────────────────────────────────
   Шапка, подвал и выпадашка языка заданы почти чёрным прямо в разметке или
   в правилах страницы. Инлайн перебивается только !important — без него на
   светлой теме текст ложится тёмным по тёмному и логотип пропадает. */
nav{background:var(--nav-bg)!important;border-bottom:1px solid var(--border)}
#mob-subnav{background:var(--nav-bg)!important;border-bottom:1px solid var(--border)}
footer{background:var(--bg3)!important;border-top:1px solid var(--border)}
#lp-lang-drop{background:var(--drop-bg)!important;border:1px solid var(--border)!important;
  box-shadow:var(--sh-2)!important}
#lp-lang-drop > div{color:var(--text)}

/* Акцентная кнопка: на светлой теме заливка тёмно-рыжая, и чёрный текст на
   ней даёт 3.2:1. Отдаём цвет, парный к заливке. */
.nav-btn-reg,.btn-primary{color:var(--on-accent)!important}

/* Декоративное свечение на светлой теме превращается в грязное пятно. */
body.theme-light .glow,
body.theme-light .glow-tl,
body.theme-light .glow-br{opacity:.3}

/* ── Браузерные поверхности ────────────────────────────────────────────────
   Выделение, каретка, скроллбар, фокус, подчёркивание и цифры приходят с
   дефолтами, которые не принадлежат ни одной системе. Красим из палитры. */
::selection{background:rgba(249,115,22,.30);color:#fff}
body.theme-light ::selection{background:rgba(173,74,9,.20);color:#17131c}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--w12);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--accent-line);background-clip:content-box}
html{scrollbar-width:thin;scrollbar-color:var(--w15) transparent}
input,textarea,select{caret-color:var(--cyan)}
a{text-underline-offset:3px}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:var(--radius-xs)}
table td,table th,[data-tabular]{font-variant-numeric:tabular-nums}

/* ── Переключатель темы ────────────────────────────────────────────────────
   Одна и та же кнопка на всех страницах: правый нижний угол, над контентом,
   но ниже модалок. Ставится скриптом, разметку страницы трогать не нужно. */
.lp-theme-dock{position:fixed;right:16px;bottom:16px;z-index:200}
.lp-theme-btn{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:var(--radius-xs);
  background:var(--card);border:1px solid var(--border);color:var(--text-dim);
  cursor:pointer;flex-shrink:0;box-shadow:var(--sh-1);
  transition:color .18s var(--ease),background .18s var(--ease),
             border-color .18s var(--ease),box-shadow .18s var(--ease)}
.lp-theme-btn:hover{color:var(--cyan);border-color:var(--card-border-hover);
  background:var(--cyan-dim);box-shadow:var(--sh-2)}
.lp-theme-btn svg{display:block}

@media (prefers-reduced-motion:reduce){
  .lp-theme-btn{transition:none}
}