/* ============================================================
   ОБЩИЕ ТОКЕНЫ И БАЗА — design/index.html и design/checkout.html.

   Раньше каждая страница держала свою копию палитры и получала
   расхождения (--red-bg и --shadow-card были только в одной из
   них). Здесь — единственный источник: правите тут, обе страницы
   получают изменение при следующей загрузке.

   Светлая тема: ночь в шапке, день на странице (одна смена темы,
   как рассвет после ночного рейса). Тёмная тема продолжает ночь
   на всю страницу. Все пары текст/фон проверены на WCAG AA.
   --focus переключается на --focus-surface: тёмный контур на
   светлой поверхности, янтарный — на тёмной ночной шапке.

   Радиусы: чипы и категории пилюлями; кнопки, поля, дни календаря 10px;
   карточки 14px; большие поверхности 20px.
   ============================================================ */
:root{
  --night:#0d1733; --night-2:#16234c; --night-3:#22315f;
  --cta:#f5a524; --cta-hover:#e8980f; --cta-ink:#3a2600;

  --bg:#f6f7fb; --surface:#ffffff; --surface-2:#eef1f7;
  --ink:#141a29; --ink-2:#3f4a60; --dim:#5b6577; --faint:#666f83;
  --line:#e2e6ef; --line-2:#cdd4e6;
  --brand:#1e3163; --brand-ink:#ffffff; --brand-soft:#eaeefa; --brand-line:#c9d3f0;
  --green:#12784a; --green-bg:#e7f3ec;
  --amber:#96600a; --amber-bg:#fdf3e2;
  --red:#be3229; --red-bg:#fbeceb;
  --focus-surface:#1e3163;
  --shadow-card:0 1px 2px rgba(20,32,70,.05),0 10px 28px rgba(20,32,70,.07);

  --r-sm:10px; --r:14px; --r-lg:20px;
  --gutter:clamp(16px,4vw,28px);
  --ease:cubic-bezier(.16,1,.3,1);
  --focus:var(--focus-surface);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0c1430; --surface:#131d3d; --surface-2:#1a2549;
    --ink:#eef1f8; --ink-2:#c9d0e3; --dim:#a8b1c9; --faint:#8f99b5;
    --line:#26325b; --line-2:#34416e;
    --brand:#b9c6f0; --brand-ink:#0c1430; --brand-soft:#18224a; --brand-line:#2c3a6e;
    --green:#5fd49a; --green-bg:#11352a;
    --amber:#f2b453; --amber-bg:#3a2a10;
    --red:#ff8a80; --red-bg:#3a1a1c;
    --focus-surface:#f5a524;
    --shadow-card:0 1px 2px rgba(0,0,0,.2),0 10px 28px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --bg:#0c1430; --surface:#131d3d; --surface-2:#1a2549;
  --ink:#eef1f8; --ink-2:#c9d0e3; --dim:#a8b1c9; --faint:#8f99b5;
  --line:#26325b; --line-2:#34416e;
  --brand:#b9c6f0; --brand-ink:#0c1430; --brand-soft:#18224a; --brand-line:#2c3a6e;
  --green:#5fd49a; --green-bg:#11352a;
  --amber:#f2b453; --amber-bg:#3a2a10;
  --red:#ff8a80; --red-bg:#3a1a1c;
  --focus-surface:#f5a524;
  --shadow-card:0 1px 2px rgba(0,0,0,.2),0 10px 28px rgba(0,0,0,.25);
}

/* ---------------- база и мелкие утилиты, общие для обеих страниц ---------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.5 Onest,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none!important}
p{text-wrap:pretty}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
[tabindex="-1"]:focus{outline:none}
/* Поверхности браузера — из той же палитры: выделение текста янтарём
   рассвета, каретка и системные флажки/ползунки — цветом бренда. */
::selection{background:rgba(245,165,36,.32);color:inherit}
html{accent-color:var(--brand);caret-color:var(--brand);scrollbar-color:var(--line-2) var(--bg)}

.demo p{margin:0}
.demo{margin:0;background:var(--amber-bg);color:var(--amber);font-size:14px;line-height:1.4;padding:9px var(--gutter);text-align:center}