/* Утверждённая палитра. Значения перенесены из действующего styles.css
   без изменений: цвет доски, рамы, мела и свечений тот же самый.

   Ни один другой файл не задаёт цвет прямым значением. Если понадобится
   новая тема, добавляется блок здесь — остальные файлы не трогаются. */

:root {
  /* доска и материал */
  --bg-slate:        #0b2115;
  --wood-color:      #5c3a21;
  --chalk-white:     #f4f3ef;
  --chalk-cream:     #e0d8c3;

  /* свечения */
  --accent-orange:   #ff7a00;
  --success-green:   #00e676;
  --error-pink:      #ff1744;

  /* стекло: панели, кнопки, шапка */
  --glass-bg:        rgba(255, 255, 255, 0.08);
  --glass-border:    rgba(255, 255, 255, 0.15);
  --glass-shadow:    0 12px 40px 0 rgba(0, 0, 0, 0.5);

  /* страница вокруг доски */
  --page-bg:         #0e1512;
  --page-text:       #e8e6e1;
  --page-dim:        rgba(232, 230, 225, 0.62);

  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --safe-area-bottom:  env(safe-area-inset-bottom, 0px);

  /* размеры, от которых зависит вёрстка */
  --radius-knopka:   20px;
  --radius-panel:    14px;
  --header-height:   50px;
}

[data-theme="light"] {
  --bg-slate:        #3d8b56;
  --wood-color:      rgba(180, 140, 80, 0.25);
  --chalk-white:     #ffffff;
  --chalk-cream:     #e8c840;

  --accent-orange:   #ff8c00;
  --success-green:   #22a85a;
  --error-pink:      #e8324a;

  --glass-bg:        rgba(255, 255, 255, 0.88);
  --glass-border:    rgba(0, 0, 0, 0.10);
  --glass-shadow:    0 8px 28px rgba(0, 0, 0, 0.13);

  --page-bg:         #ebebeb;
  --page-text:       #222222;
  --page-dim:        rgba(34, 34, 34, 0.62);
}

/* Кнопки шапки — один облик на все три: видео, настройки, тема.
   Раньше каждая красилась по-своему, и в светлой теме они расходились. */
.knopka-shapki {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  height: 38px;
  padding: 0 13px;
  box-sizing: border-box;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-knopka);
  background: var(--glass-bg);
  color: var(--page-text);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-smooth);
  flex-shrink: 0;
}
.knopka-shapki:hover { border-color: var(--accent-orange); }
.knopka-shapki:focus-visible {
  outline: 2px solid var(--accent-orange);
  outline-offset: 3px;
}
.knopka-shapki[aria-pressed="true"] { border-color: var(--accent-orange); }