/*
 * Дизайн-токены и 4 темы. Подключается на всех страницах сайта,
 * включая страницы из pages/ — используй эти переменные в своих стилях.
 * Тема задаётся атрибутом data-theme на <html> (см. theme-init.js).
 */
:root {
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 200ms;
}

/* Тёмная — по умолчанию */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1115;
  --bg-glow: rgba(124, 156, 255, .16);
  --bg-glow-2: rgba(180, 124, 255, .08);
  --surface: #171a21;
  --surface-2: #1f232c;
  --border: #2a2f3a;
  --text: #e8eaed;
  --text-muted: #9aa1ad;
  --accent: #7c9cff;
  --accent-strong: #a3b8ff;
  --accent-soft: rgba(124, 156, 255, .16);
  --accent-contrast: #0b0d12;
  --danger: #ff6b6b;
  --danger-soft: rgba(255, 107, 107, .14);
  --success: #4cc38a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 48px rgba(0, 0, 0, .4);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5f8;
  --bg-glow: rgba(58, 91, 217, .10);
  --bg-glow-2: rgba(150, 90, 230, .06);
  --surface: #ffffff;
  --surface-2: #eef0f4;
  --border: #dde1e8;
  --text: #161a22;
  --text-muted: #5b6372;
  --accent: #3a5bd9;
  --accent-strong: #2a47b8;
  --accent-soft: rgba(58, 91, 217, .12);
  --accent-contrast: #ffffff;
  --danger: #d33a3a;
  --danger-soft: rgba(211, 58, 58, .10);
  --success: #1f9d63;
  --shadow: 0 1px 2px rgba(20, 30, 50, .06), 0 8px 24px rgba(20, 30, 50, .08);
  --shadow-lg: 0 2px 4px rgba(20, 30, 50, .06), 0 18px 48px rgba(20, 30, 50, .14);
}

[data-theme="green"] {
  color-scheme: dark;
  --bg: #0e1712;
  --bg-glow: rgba(76, 195, 138, .15);
  --bg-glow-2: rgba(160, 220, 90, .06);
  --surface: #15211a;
  --surface-2: #1c2b22;
  --border: #263a2e;
  --text: #e3f2e8;
  --text-muted: #93ae9c;
  --accent: #4cc38a;
  --accent-strong: #7fdcab;
  --accent-soft: rgba(76, 195, 138, .16);
  --accent-contrast: #06120b;
  --danger: #ff7a6b;
  --danger-soft: rgba(255, 122, 107, .14);
  --success: #4cc38a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 48px rgba(0, 0, 0, .4);
}

[data-theme="pink"] {
  color-scheme: light;
  --bg: #fff4f8;
  --bg-glow: rgba(214, 69, 124, .12);
  --bg-glow-2: rgba(255, 170, 120, .10);
  --surface: #ffffff;
  --surface-2: #fce8f0;
  --border: #f3cfdd;
  --text: #3a1f2b;
  --text-muted: #85596b;
  --accent: #c73a70;
  --accent-strong: #a62c5b;
  --accent-soft: rgba(199, 58, 112, .12);
  --accent-contrast: #ffffff;
  --danger: #c62f2f;
  --danger-soft: rgba(198, 47, 47, .10);
  --success: #1f9d63;
  --shadow: 0 1px 2px rgba(120, 30, 70, .06), 0 8px 24px rgba(120, 30, 70, .08);
  --shadow-lg: 0 2px 4px rgba(120, 30, 70, .06), 0 18px 48px rgba(120, 30, 70, .14);
}

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-text-size-adjust: 100%;
}

html.theme-anim,
html.theme-anim * {
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease) !important;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
  *, *::before, *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; }
}