/* =========================================================
   ПЕРЕМЕННЫЕ — цвета, шрифты, тема
   Меняй здесь, изменения применятся по всему сайту
   ========================================================= */

/* --- Светлая тема (по умолчанию) --- */
:root {
  /* Цвет акцента следует за фоном: --h обновляется скриптом background.js */
  --h: 255;

  /* Алиасы для скрипта фона (он использует --mute, --panel, --line) */
  --mute: var(--muted);
  --panel: var(--surface);
  --line: var(--border);

  /* Основные цвета */
  --bg: #f5f5f9;
  --surface: color-mix(in srgb, #fff 87%, transparent);
  --surface2: color-mix(in srgb, #eef0f5 84%, transparent);
  --border: #dfe2ec;
  --text: #17181f;
  --muted: #696d80;

  /* Акцент — оттенок меняется со скроллом через --h */
  --accent: hsl(var(--h) 68% 46%);
  --g1: hsl(var(--h) 68% 48%);
  --g2: hsl(calc(var(--h) + 50) 68% 38%);
  --accent-soft: hsl(var(--h) 68% 45% / .08);
  --glow: hsl(var(--h) 68% 45% / .3);
  --onacc: #fff; /* текст поверх акцентных кнопок */

  /* Шапка */
  --hdr: rgba(245, 245, 249, .72);

  /* Шрифты */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --disp: "Unbounded", var(--sans); /* заголовки */
}

/* --- Тёмная тема --- */
:root[data-theme="dark"] {
  --bg: #06070c;
  --surface: color-mix(in srgb, #0e1019 84%, transparent);
  --surface2: color-mix(in srgb, #151928 80%, transparent);
  --border: #242a44;
  --text: #f0f1f7;
  --muted: #8a8fa6;

  --accent: hsl(var(--h) 85% 70%);
  --g1: hsl(var(--h) 88% 74%);
  --g2: hsl(calc(var(--h) + 50) 85% 62%);
  --accent-soft: hsl(var(--h) 85% 62% / .1);
  --glow: hsl(var(--h) 85% 62% / .4);
  --onacc: #0a0c16;

  --hdr: rgba(6, 7, 12, .68);
}

/* --- Переключатель иконок темы --- */
:root[data-theme="dark"] .i-moon { display: none; }
:root:not([data-theme="dark"]) .i-sun { display: none; }