/* =========================================================================
   Токены дизайн-закона v3 «Мастерская», 20 сентября 2026.

   Один файл на весь портал: главная, посадочные, кабинет, письма. Имена и
   значения взяты из собранной главной `design/masterskaya-2026-09-20/glavnaya.html`
   без единой правки — иначе кабинет и сайт разойдутся молча, и увидеть это
   можно будет только глазами, переключая вкладки.

   Тема: атрибут `data-tema` на <html>, значения `den` и `noch`. Сама встаёт
   как в браузере или телефоне (с 26.09.2026, до того — ночь с 19 до 8), выбор
   человека главнее и запоминается в localStorage под ключом `tema-vybor`.
   Правила — `static/tema.js`.

   Лайм `#C6F23E` — нить через всё, но ровно одной вещью на блок. Заголовки,
   метки, плоскости и границы лаймом не красятся никогда.
   ========================================================================= */

/* ---------- ДЕНЬ: мастерская при окне ---------- */
:root{
  --fon:#F3F5F2; --fon-rgb:243,245,242; --fon2:#EAEDE8; --fon3:#FAFBF9;
  --tekst:#1A1C1A; --tush:#5F655E;
  --liniya:rgba(26,28,26,.13); --liniya2:rgba(26,28,26,.32); --liniya-pole:rgba(26,28,26,.55);
  --laym:#C6F23E; --na-layme:#141712;
  --stal:#6B7280; --stal-fon:rgba(107,114,128,.09);
  --svet-tepl:rgba(230,168,92,.06); --svet-hol:rgba(120,150,170,.12);
  --lampa-cvet:#E6A85C;
  --zerno:.03;
  --doska:#1F3A2E; --na-doske:#EAF0E6; --na-doske-tush:#B9C6B8;
  --bumaga:#F4F1E8; --na-bumage:#1A1C1A; --na-bumage-tush:#5C6058; --liniya-bum:rgba(26,28,26,.18);
  --ekran:#0D1119; --ekran-ramka:rgba(138,147,163,.28); --na-ekrane:#E6EAF0;
  --ekran-tush:#8A93A3; --sinij:#3B5FB8; --ekran-svet:rgba(59,95,184,.22);
  --stiker-1:#EFE6A8; --stiker-2:#C9DDEC; --stiker-3:#ECEBE3; --na-stikere:#1A1C1A;
  --oshibka:#9C3F27;
  --ok:#2F6B45;

  --sans:Onest,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r:6px; --r-bum:2px; --wrap:1320px; --pole:clamp(16px,4vw,56px); --shapka:64px;
  --zona:44px;
}

/* ---------- НОЧЬ: уголь с индиго, свет ламп ---------- */
[data-tema="noch"]{
  --fon:#15141B; --fon-rgb:21,20,27; --fon2:#1B1A23; --fon3:#22202C;
  --tekst:#EFEDE8; --tush:#98939F;
  --liniya:rgba(239,237,232,.12); --liniya2:rgba(239,237,232,.3); --liniya-pole:rgba(239,237,232,.42);
  --stal:#8A93A3; --stal-fon:rgba(138,147,163,.12);
  --svet-tepl:rgba(230,168,92,.3); --svet-hol:rgba(120,150,190,.16);
  --zerno:.05;
  --oshibka:#E8836A;
  --ok:#7EBA8B;
}

*{box-sizing:border-box}
html{background:var(--fon)}

/* ---------- Зерно: один фиксированный слой на всё ---------- */
.zerno{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:var(--zerno); mix-blend-mode:overlay; transition:opacity .5s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

:focus-visible{outline:2px solid var(--laym); outline-offset:3px}

/* ---------- Кнопки: лаймом только главная в блоке ---------- */
.knopka{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--zona); padding:12px 22px;
  background:var(--laym); color:var(--na-layme);
  font-family:var(--sans); font-weight:600; font-size:16px; line-height:1.2;
  text-decoration:none; border:0; border-radius:var(--r); cursor:pointer;
  transition:transform .18s, filter .18s;
}
.knopka:hover{filter:brightness(1.06); transform:translateY(-1px)}
.knopka-2{
  background:transparent; color:var(--tekst); border:1px solid var(--liniya2);
}
.knopka-2:hover{border-color:var(--tekst); background:var(--stal-fon); filter:none}
.knopka[disabled]{opacity:.45; cursor:not-allowed; transform:none}

/* ---------- Переключатель темы, как на главной ---------- */
.tema{display:inline-flex; border:1px solid var(--liniya); border-radius:999px; padding:3px; gap:2px; background:var(--stal-fon)}
.tema button{
  border:0; background:transparent; color:var(--tush); font:inherit; font-size:12px;
  font-family:var(--mono); padding:6px 12px; border-radius:999px; cursor:pointer;
  transition:background .2s, color .2s;
}
.tema button[aria-pressed="true"]{background:var(--tekst); color:var(--fon)}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}