/* ============================================================
   CSS-переменные: цвета, шрифты, отступы, тени.
   Светлая палитра — базовая; тёмная переопределяет только значения.
   ============================================================ */

:root{
  color-scheme: light;
  --bg:#F7FAF9;
  --bg-sunk:#EBF2F0;
  --surface:#FFFFFF;
  --ink:#0F1F1D;
  --ink-2:#43534F;
  --ink-3:#5A6D69;
  --line:#DFE9E7;
  --line-strong:#C7D6D2;
  --brand:#20B2AA;
  --brand-deep:#17968F;
  --brand-ink:#0C6E68;
  --brand-tint:#E6F6F4;
  --on-brand:#04231F;
  --band:#0F1F1D;
  --on-band:#F7FAF9;
  --yellow:#FFC444;
  --yellow-soft:#FFEDC0;
  --on-yellow:#241A00;
  --ok:#0E7C55;
  --err:#D0342C;
  --shadow-1:0 1px 2px rgba(15,31,29,.05), 0 6px 16px -10px rgba(15,31,29,.18);
  --shadow-2:0 2px 6px rgba(15,31,29,.06), 0 22px 44px -22px rgba(15,31,29,.32);
  --shadow-brand:0 10px 24px -12px rgba(32,178,170,.65);
  --r-m:16px; --r-l:22px;
  --pad:clamp(20px, 5vw, 40px);
  --display:"Unbounded", "Golos Text", system-ui, sans-serif;
  --body:"Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0D1413;
    --bg-sunk:#131C1B;
    --surface:#16201F;
    --ink:#EFF6F4;
    --ink-2:#B6C6C3;
    --ink-3:#869996;
    --line:#25322F;
    --line-strong:#374643;
    --brand:#20B2AA;
    --brand-deep:#3FD0C7;
    --brand-ink:#4FD8CE;
    --brand-tint:#0F2E2C;
    --on-brand:#04231F;
    --band:#1B2A28;
    --on-band:#EFF6F4;
    --yellow:#FFD062;
    --yellow-soft:#4A3A14;
    --on-yellow:#1A1200;
    --ok:#3ECF97;
    --err:#FF7A70;
    --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 6px 16px -10px rgba(0,0,0,.7);
    --shadow-2:0 2px 6px rgba(0,0,0,.5), 0 22px 44px -22px rgba(0,0,0,.9);
    --shadow-brand:0 10px 24px -12px rgba(32,178,170,.45);
  }
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0D1413;
  --bg-sunk:#131C1B;
  --surface:#16201F;
  --ink:#EFF6F4;
  --ink-2:#B6C6C3;
  --ink-3:#869996;
  --line:#25322F;
  --line-strong:#374643;
  --brand:#20B2AA;
  --brand-deep:#3FD0C7;
  --brand-ink:#4FD8CE;
  --brand-tint:#0F2E2C;
  --on-brand:#04231F;
  --band:#1B2A28;
  --on-band:#EFF6F4;
  --yellow:#FFD062;
  --yellow-soft:#4A3A14;
  --on-yellow:#1A1200;
  --ok:#3ECF97;
  --err:#FF7A70;
  --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 6px 16px -10px rgba(0,0,0,.7);
  --shadow-2:0 2px 6px rgba(0,0,0,.5), 0 22px 44px -22px rgba(0,0,0,.9);
  --shadow-brand:0 10px 24px -12px rgba(32,178,170,.45);
}