/* Основа нового сайта «Тёмной студии»: токены двух схем, шрифты, ритм.
   Решения: docs/тз_сайт_полноценный_20260917.md, разделы 4, 14, 16.
   Светлая схема на bare :root, тёмная повторяется в media и в [data-theme]:
   так переключатель в шапке побеждает настройку системы в обе стороны. */

:root {
  --bumaga: #F3F1EC;         /* основной фон */
  --bumaga-2: #FFFFFF;       /* карточки, таблицы, поля */
  --bumaga-3: #EAE7E0;       /* утопленные места, подложка кода */
  --liniya: #D9D6CF;
  --tekst: #1E1E20;
  --tekst-2: #5E5E62;        /* контраст на бумаге 6,1 */
  --deystvie: #1F7A6D;       /* бирюза сайта, контраст на бумаге 4,6 */
  --deystvie-navedenie: #19665B;
  --na-deystvii: #FFFFFF;
  --ssylka: #1F7A6D;

  /* тёмная полоса: цвет панелей программы, снимок окна входит без швов */
  --polosa: #2F2F31;
  --polosa-2: #3A3A3D;
  --polosa-tekst: #E6E6E6;
  --polosa-tekst-2: #B4B4B8;
  --polosa-deystvie: #8FCFC0;
  --polosa-na-deystvii: #10201C;
  --kholst: #525254;

  --podval: #1B1B1D;
  --podval-tekst: #C9C9CC;

  /* данные кадров, как в программе */
  --vzyat: #7FAE6F;
  --otkloneno: #B25F5A;
  --zvezda: #CFA94D;

  --ten-okna: 0 12px 32px rgba(30, 30, 32, .18);
  --kromka-okna: rgba(0, 0, 0, .10);
  --ten-slajda: 0 1px 2px rgba(30, 30, 32, .10), 0 6px 18px rgba(30, 30, 32, .08);
  --ramka-slajda: 6px;
  --ramka-slajda-cvet: #FFFFFF;

  --radius-knopki: 8px;      /* Сергей 17.09: кнопки чуть скруглены */
  --radius-vnutri: 6px;
  --radius-okna: 0;          /* окна программы и фото прямоугольные */

  --shrift-zagolovok: Manrope, "Segoe UI", system-ui, -apple-system, sans-serif;
  --shrift-tekst: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --shrift-cifry: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --h1: 76px; --h1-v: 1.0;
  --h2: 48px; --h2-v: 1.06;
  --h3: 26px; --h3-v: 1.2;
  --tekst-r: 19px; --tekst-v: 28px;
  --melko-r: 16px; --melko-v: 24px;
  --podpis-r: 14px; --podpis-v: 20px;

  --kontejner: 1320px;
  --pole: 40px;
  --razdel: 120px;
  --krivaya: cubic-bezier(.22, 1, .36, 1);

  /* отличия раскладки между схемами тоже токены */
  --stol-ugol: -4deg;
  --stol-zazor: 16px;
  --stol-ramka: 6px;
  --stol-podlozhka: transparent;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bumaga: #1F1F21; --bumaga-2: #2B2B2F; --bumaga-3: #18181A;
    --liniya: #44444A; --kromka-okna: rgba(255, 255, 255, .10); --tekst: #E6E6E6; --tekst-2: #A8A8AC;
    --deystvie: #8FCFC0; --deystvie-navedenie: #A6DACD; --na-deystvii: #10201C; --ssylka: #8FCFC0;
    --polosa: #2F2F31; --polosa-2: #3A3A3D;
    --podval: #141416;
    --ten-okna: 0 12px 32px rgba(0, 0, 0, .45);
    --ten-slajda: none; --ramka-slajda: 0px; --ramka-slajda-cvet: transparent;
    --stol-ugol: 0deg; --stol-zazor: 3px; --stol-ramka: 0px; --stol-podlozhka: #2F2F31;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bumaga: #1F1F21; --bumaga-2: #2B2B2F; --bumaga-3: #18181A;
  --liniya: #44444A; --kromka-okna: rgba(255, 255, 255, .10); --tekst: #E6E6E6; --tekst-2: #A8A8AC;
  --deystvie: #8FCFC0; --deystvie-navedenie: #A6DACD; --na-deystvii: #10201C; --ssylka: #8FCFC0;
  --polosa: #2F2F31; --polosa-2: #3A3A3D;
  --podval: #141416;
  --ten-okna: 0 12px 32px rgba(0, 0, 0, .45);
  --ten-slajda: none; --ramka-slajda: 0px; --ramka-slajda-cvet: transparent;
  --stol-ugol: 0deg; --stol-zazor: 3px; --stol-ramka: 0px; --stol-podlozhka: #2F2F31;
  color-scheme: dark;
}

@media (max-width: 1100px) {
  :root { --h1: 60px; --h2: 40px; --pole: 32px; --razdel: 96px; }
}
@media (max-width: 760px) {
  :root { --h1: 40px; --h1-v: 1.05; --h2: 32px; --h2-v: 1.1; --h3: 22px;
          --tekst-r: 17px; --tekst-v: 26px; --melko-r: 15px; --melko-v: 22px;
          --pole: 16px; --razdel: 72px; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--bumaga); color: var(--tekst);
  font: 400 var(--tekst-r)/var(--tekst-v) var(--shrift-tekst);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--shrift-zagolovok); text-wrap: balance; }
h1 { font-size: var(--h1); line-height: var(--h1-v); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: var(--h2); line-height: var(--h2-v); font-weight: 700; letter-spacing: -.025em; }
h3 { font-size: var(--h3); line-height: var(--h3-v); font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--deystvie); outline-offset: 3px; border-radius: 2px; }
.skryto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.v { max-width: var(--kontejner); margin-inline: auto; padding-inline: var(--pole); }
.razdel { padding-block: var(--razdel); }
.razdel + .razdel { padding-top: 0; }
.polosa { background: var(--polosa); color: var(--polosa-tekst); --tekst: var(--polosa-tekst); --tekst-2: var(--polosa-tekst-2); --bumaga: var(--polosa); --bumaga-3: var(--polosa-2);
  --deystvie: var(--polosa-deystvie); --na-deystvii: var(--polosa-na-deystvii); --ssylka: var(--polosa-deystvie);
  --liniya: #45454A; --bumaga-2: var(--polosa-2); }
.polosa + .razdel, .razdel + .polosa { padding-top: var(--razdel); }
.vvodnaya { margin-top: 18px; max-width: 680px; color: var(--tekst-2); }
.nad { display: flex; align-items: center; gap: 10px; margin-bottom: 22px;
  color: var(--tekst-2); font-size: var(--podpis-r); letter-spacing: .02em; }
.nad::before { content: ""; width: 8px; height: 8px; background: var(--deystvie); border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}