/* ============================================================
   src/theme/themes/graffiti.css — тема оформления «ГРАФФИТИ»
   Автор: Фрэдди (designer), 15.10.2026. Приказ Мити через coder.

   ЧТО ЭТО. Дополнительная ось поверх светлой/тёмной темы Adwaita:
   «скин» рабочего стола в стиле уличной росписи. Включается атрибутом
   на <html>:
        <html data-skin="graffiti-light">   — светлая палитра (спрей-оранж)
        <html data-skin="graffiti-dark">    — тёмная палитра (неон-синий)
   Без атрибута работает штатный Adwaita из tokens.css — ничего не ломается.

   ГРАНИЦЫ КОНТРАКТА. Имена переменных из tokens.css не переименовываются
   и не удаляются — здесь только ПЕРЕОПРЕДЕЛЕНИЕ ЗНАЧЕНИЙ под скином
   (+ новые переменные с префиксом --graffiti-*, которые читает только
   этот файл). Dark-блок самодостаточен: graffiti-dark не требует
   data-theme="dark", хотя и совместим с ним.

   АКЦЕНТ. Живёт в --accent* (как в настройках GNOME): перекрашивается
   свачем в Settings и/или палитрой скина. Цвета не хардкодим в разметке.
   ============================================================ */

/* ---------- палитры скина ---------- */

html[data-skin="graffiti-light"] {
  --graffiti-wall:     #e7ddd0;   /* фолбэк-цвет обоев */
  --graffiti-ink:      #16121a;
  --graffiti-tape:     #fffdf8;

  --accent:            #ed5b00;   /* Adwaita orange — «баллончик» */
  --accent-hover:      #d94f00;
  --accent-active:     #c24600;
  --accent-fg:         #ffffff;
  --accent-bg:         rgba(237,91,0,.15);

  --window-bg:         #fbf6ee;   /* тёплая бумага, не чистый белый */
  --window-fg:         rgb(0 0 6 / 85%);
  --window-border:     rgba(22,18,26,.20);
  --radius-window:     10px;      /* чуть чопорнее, «трафарет» */

  --headerbar-bg:      #fffdf8;
  --headerbar-bg-back: #f3ece2;
  --headerbar-fg:      rgb(22 18 26 / 85%);
  --headerbar-border:  rgb(22 18 26 / 16%);

  --panel-bg:          rgba(251,246,238,.92);
  --panel-fg:          rgb(22 18 26 / 85%);
  --dock-bg:           rgba(251,246,238,.88);

  --shadow-window:     0 6px 22px rgba(22,18,26,.18), 0 1px 4px rgba(22,18,26,.12);
  --shadow-focus:      0 16px 44px rgba(22,18,26,.28), 0 3px 9px rgba(22,18,26,.16);
  --focus-ring:        rgba(237,91,0,.65);
}

html[data-skin="graffiti-dark"] {
  --graffiti-wall:     #14131a;
  --graffiti-ink:      #0b0a10;
  --graffiti-tape:     #2a2436;

  --accent:            #3584e4;   /* Adwaita blue — «неон на стене» */
  --accent-hover:      #4a8fe7;
  --accent-active:     #2a7adb;
  --accent-fg:         #ffffff;
  --accent-bg:         rgba(53,132,228,.25);

  --window-bg:         #1a1720;
  --window-fg:         #f3eefc;
  --window-border:     rgba(243,238,252,.16);
  --radius-window:     10px;

  --headerbar-bg:      #262130;
  --headerbar-bg-back: #1a1720;
  --headerbar-fg:      #f3eefc;
  --headerbar-border:  rgb(0 0 6 / 34%);

  --panel-bg:          rgba(26,23,32,.92);
  --panel-fg:          #f3eefc;
  --dock-bg:           rgba(26,23,32,.88);

  --shadow-window:     0 6px 22px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.35);
  --shadow-focus:      0 16px 44px rgba(0,0,0,.70), 0 3px 9px rgba(0,0,0,.45);
  --focus-ring:        rgba(53,132,228,.65);

  /* тёмные семантические заливки (как в Adwaita dark) */
  --destructive:       #c01c28;
  --success:           #26a269;
  --warning:           #cd9309;
}

/* ---------- обои скина ---------- */
html[data-skin="graffiti-light"] #wallpaper {
  background-color: var(--graffiti-wall);
  background-image: url("../wallpapers/graffiti-light.svg");
}
html[data-skin="graffiti-dark"] #wallpaper {
  background-color: var(--graffiti-wall);
  background-image: url("../wallpapers/graffiti-dark.svg");
}

/* ---------- хром окна: «трафарет» ----------
   Плоские круги CSD остаются, но получают чернильный контур скина. */
html[data-skin] .win {
  border-width: 2px;
  border-color: color-mix(in srgb, var(--graffiti-ink) 55%, var(--window-border));
}
html[data-skin] .titlebar {
  border-bottom-width: 2px;
  letter-spacing: .01em;
}
html[data-skin] .tb-btn { border-color: var(--graffiti-ink); opacity: .82; }
html[data-skin] .tb-btn:hover { opacity: 1; }

/* ---------- topbar / dock: «наклейка на стене» ---------- */
html[data-skin] #topbar,
html[data-skin] .dock {
  border: 1px solid color-mix(in srgb, var(--graffiti-ink) 40%, transparent);
}
html[data-skin] .dock-icon.running { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- доступность ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-skin] .win,
  html[data-skin] .tb-btn,
  html[data-skin] .dock-icon { transition-duration: 1ms !important; }
}

/* ---------- выбор темы в Settings → Appearance (класс .theme-opts/.theme-opt) ----------
   Стили не зависят от активного скина — панель выбора должна выглядеть
   правильно и в чистом Adwaita. Разметку ставит src/apps/settings.js. */
.theme-opts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; margin: 6px 0 14px;
}
.theme-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; cursor: pointer; font: inherit; text-align: left;
  color: var(--window-fg); background: var(--window-bg);
  border: 2px solid var(--window-border); border-radius: 10px;
}
.theme-opt:hover { background: var(--accent-bg); }
.theme-opt:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--focus-ring); }
.theme-opt.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--focus-ring); }
.theme-opt-swatch {
  width: 26px; height: 26px; flex: none; border-radius: 6px;
  border: 1px solid rgba(0,0,0,.28);
}
.theme-opt[data-skin=""] .theme-opt-swatch { background: #fafafb; }
.theme-opt[data-skin=""][data-mode="dark"] .theme-opt-swatch { background: #222226; }
.theme-opt[data-skin="graffiti-light"] .theme-opt-swatch {
  background: linear-gradient(135deg, #ed5b00 0%, #9141ac 58%, #3584e4 100%);
}
.theme-opt[data-skin="graffiti-dark"] .theme-opt-swatch {
  background: linear-gradient(135deg, #3584e4 0%, #9141ac 58%, #e5a50a 100%);
}
.theme-opt-name { font-size: 13px; line-height: 1.2; }