/* ═══════════════════════════════════════════════════════════════════
   PPKLink — витрина продукта. ТОКЕНЫ: палитра, шкала кеглей, отступы.
   Палитра и радиусы взяты из дизайн-системы самого софта
   (aggregation_app/ui/style.py, «Тихий свет»): холст #F5F5F7, один
   синий акцент #0A6CFF, зелёный только успех, красный только отказ.
   Тёмная тема — не инверсия, а отдельный набор значений.
   Порядок подключения: fonts → tokens → base → sections → device → mobile.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --canvas:#F5F5F7; --surface:#FFFFFF; --field:#F7F7F9; --tint:#F0F0F3;
  --hair:#E8E8ED; --border:#D9D9DE; --text:#1D1D1F; --mute:#5F5F66;
  --faint:#6E6E73;
  --accent:#0A6CFF; --accent-hover:#2E82FF; --accent-soft:#EAF2FF;
  --accent-btn:#0A6CFF;
  /* ⚠ Синий КАК ТЕКСТ: #0A6CFF на холсте даёт 4,19:1 — ниже нормы 4,5 для
     мелкого текста. Ссылки, номера шагов и мелкие подписи берут этот, темнее;
     кнопки и кольца остаются на --accent. */
  --accent-text:#0757CC;
  --green:#1E8E3E; --green-soft:#E8F5EC; --green-deep:#166B31;
  --red:#D93025; --red-soft:#FDECEB; --red-deep:#C0362C;
  --amber:#B25E00; --amber-soft:#FFF4E3;
  /* негорящие лампы сигнальной колонны на схеме: цвет есть, свечения нет */
  --red-dim:#EFB8B3; --amber-dim:#F1D3A3;
  --steel:#C7C9D1; --steel-dark:#9BA0AC; --belt:#E3E4E9; --grid:#EAEAF0;
  /* оборудование на мнемосхеме: корпус, тень корпуса, обводка, полотно ленты */
  --mach:#F4F5F8; --mach-2:#E1E4EA; --mach-line:#B7BCC8;
  --belt-a:#E7E9EF; --belt-b:#D6D9E1;
  /* объёмная схема (кабинетная проекция): материалы одним цветом, грани
     темнеют тенями --shade-1/--shade-2 — в тёмной теме сами по себе */
  --graph:#3F434D; --carton:#FFF0D8; --item:#EEF3FB;
  --shade-1:rgba(16,18,26,.09); --shade-2:rgba(16,18,26,.1);
  --shadow:0 1px 2px rgba(16,18,26,.05), 0 8px 24px -16px rgba(16,18,26,.18);
  --shadow-lift:0 1px 2px rgba(16,18,26,.06), 0 22px 44px -26px rgba(16,18,26,.42);
  --r-card:18px; --r-btn:14px; --r-pill:999px; --r-in:12px;
  /* ── ШКАЛА КЕГЛЕЙ: семь ступеней, других не заводить ──────────────
     display (h1) · h2 · h3 · lead · body · small · micro */
  --fs-display:clamp(30px,4.1vw,50px);
  --fs-h2:clamp(26px,3.2vw,38px);
  --fs-h3:17px;
  --fs-lead:18px;
  --fs-body:16px;
  --fs-small:14px;
  --fs-micro:12px;
  /* ── ОТСТУПЫ ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px;
  /* ── ТРИ ПЛОТНОСТИ СЕКЦИЙ: узловые (первый экран, конфигуратор,
     форма), повествовательные, справочные. Ритм страницы — из них. */
  --sec-node:104px; --sec-narr:72px; --sec-ref:56px;
  /* ── ДВИЖЕНИЕ: только transform/opacity, выход из движения плавный ── */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --dur:160ms; --dur-slow:280ms;
  /* без этого браузер рисует ФЛАЖОК СОГЛАСИЯ и полосы прокрутки светлыми
     поверх тёмной темы — в тёмной теме галочка выглядела белым квадратом */
  color-scheme:light;
}
html[data-theme="dark"]{
  color-scheme:dark;
  --canvas:#0D0E11; --surface:#191A20; --field:#212228; --tint:#26272E;
  --hair:#2C2E36; --border:#3B3D47; --text:#EEEFF3; --mute:#A6A8B2;
  --faint:#8A8C96;
  --accent:#4D8DFF; --accent-hover:#6FA3FF; --accent-soft:#14223A;
  --accent-btn:#2E6FE0; --accent-text:#7FAEFF;
  --green:#4CC26E; --green-soft:#11301C; --green-deep:#7FDC9A;
  --red:#F26B62; --red-soft:#331718; --red-deep:#FF9E97;
  --amber:#F0A83B; --amber-soft:#2E2311;
  --red-dim:#6A302C; --amber-dim:#6A5222;
  --steel:#3B3E48; --steel-dark:#6D7382; --belt:#202228; --grid:#1A1B20;
  /* ⚠ кромка --mach-line светлее корпуса заметно (06.09): при #3A3F4C машины
     в тёмной теме сливались в один силуэт без граней */
  --mach:#242832; --mach-2:#2E323D; --mach-line:#4A5062;
  --belt-a:#2A2E38; --belt-b:#1F222A;
  --graph:#30333C; --carton:#5A4B34; --item:#3D4556;
  --shade-1:rgba(0,0,0,.28); --shade-2:rgba(0,0,0,.25);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
  --shadow-lift:0 1px 2px rgba(0,0,0,.5), 0 24px 48px -26px rgba(0,0,0,.9);
}
@media(max-width:640px){
  :root{--sec-node:64px; --sec-narr:48px; --sec-ref:40px; --fs-lead:17px}
}