/* Тема Гляньки по бренд-буку (brand/glyanka-brandbook.html), две версии:
   тёмная (основная) — графитовый фон чуть светлее чёрного и лайм для действий;
   светлая — тёплый «почти белый» фон, малиновый и циан, лайма нет совсем.
   Переключатель ставит data-theme на <html> (см. /theme.js).
   --accent — заливка (кнопки, активное), --on-accent — текст на ней, --accent-ink — акцентный текст на фоне.
   --hot — пауза, ошибки, «в эфире». --stage-* и --pen-* — цвета внутри тёмного экрана плеера:
   чертежи и счёт (--stage-accent), углы и замеры (--stage-angle — всегда малиновый), карандаши (--pen-1…4). */
:root{
  --bg:#F0EFEB; --card:#F8F7F4; --card-2:#E7E6E1; --ink:#15161B; --muted:#5D616C; --line:#D9D7D0; --chip:#E8E7E2;
  --accent:#E3175A; --on-accent:#FFFFFF; --accent-ink:#C2114D; --soft:#FBE3EA;
  --hot:#B42318; --hot-soft:#FBE5E1; --cyan:#00727A; --cyan-soft:#D8F3F4;
  --ok:#0B7A5F; --ok-soft:#DCF1E8; --warn:#8A5A00; --warn-soft:#FBEFD2;
  --screen:#121318; --screen-2:#1B1D23; --screen-ink:#F2F3F5; --screen-muted:#9097A4; --eight-a:#262932; --eight-b:#1E2027;
  --stage-accent:#FF3D77; --stage-on:#121318; --stage-angle:#FF3D77;
  --pen-1:#FF3D77; --pen-2:#FFD23F; --pen-3:#00E1EF; --pen-4:#FFFFFF;
  --btn-rest:3px 3px 0 var(--ink); --glow:0 0 0 transparent;
  --r:4px; --r-card:8px;
  --f-display:"Onest","Golos Text","Arial Black",system-ui,sans-serif;
  --f-body:"Golos Text","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#17181D; --card:#1F2128; --card-2:#282B33; --ink:#F2F3F5; --muted:#9097A4; --line:#353945; --chip:#282B33;
  --accent:#CCFF00; --on-accent:#17181D; --accent-ink:#CCFF00; --soft:#262D10;
  --hot:#FF4F84; --hot-soft:#3A1622; --cyan:#00E1EF; --cyan-soft:#0A2D31;
  --ok:#3DDC97; --ok-soft:#10302A; --warn:#F2B34B; --warn-soft:#3A2D12;
  --screen:#101116; --screen-2:#191B21;
  --stage-accent:#CCFF00; --stage-on:#101116; --stage-angle:#FF3D77;
  --pen-1:#CCFF00; --pen-2:#FF3D77; --pen-3:#00E1EF; --pen-4:#FFFFFF;
  --btn-rest:0 0 0 transparent; --glow:0 0 24px rgba(204,255,0,.28);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#17181D; --card:#1F2128; --card-2:#282B33; --ink:#F2F3F5; --muted:#9097A4; --line:#353945; --chip:#282B33;
  --accent:#CCFF00; --on-accent:#17181D; --accent-ink:#CCFF00; --soft:#262D10;
  --hot:#FF4F84; --hot-soft:#3A1622; --cyan:#00E1EF; --cyan-soft:#0A2D31;
  --ok:#3DDC97; --ok-soft:#10302A; --warn:#F2B34B; --warn-soft:#3A2D12;
  --screen:#101116; --screen-2:#191B21;
  --stage-accent:#CCFF00; --stage-on:#101116; --stage-angle:#FF3D77;
  --pen-1:#CCFF00; --pen-2:#FF3D77; --pen-3:#00E1EF; --pen-4:#FFFFFF;
  --btn-rest:0 0 0 transparent; --glow:0 0 24px rgba(204,255,0,.28);
  color-scheme:dark}

/* Переключатель темы: два квадратных сегмента — солнце и луна. */
.theme-sw{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);flex:none}
.theme-sw button{width:34px;height:30px;display:grid;place-items:center;border:0;border-radius:2px;background:transparent;color:var(--muted);cursor:pointer;padding:0}
.theme-sw button:hover{color:var(--ink)}
.theme-sw button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.theme-sw svg{width:16px;height:16px}

/* Логотип по бренд-буку: знак «Кадр» (Г — угол видоискателя, уголок и точка) + ГЛЯНЬКА, Onest 800 капсом.
   Знак цветом текста, точка — цветом действия темы. */
.logo{display:flex;gap:.42em;align-items:center;font:800 1.2rem/1 var(--f-display);letter-spacing:-.035em;text-transform:uppercase;color:inherit;text-decoration:none}
.logo svg{width:1.3em;height:1.3em;flex:none;fill:var(--ink)}
.logo svg circle{fill:var(--accent)}