/* ============================================================================
 *  theme.css  —  ДИЗАЙН-ТОКЕНЫ (палитры, радиусы, свечения)
 * ----------------------------------------------------------------------------
 *  Здесь живут цвета и "свет". Меняешь переменные -> меняется весь сайт.
 *  Тема выбирается в site.data.js -> theme: "aurora" | "sunset" | "mint" | "mono"
 * ==========================================================================*/

:root {
  /* базовые радиусы и отступы "стекла" */
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 30px;
  --blur: 22px;
  --glass-border: 1px solid rgba(255, 255, 255, 0.22);
  --glass-bg: rgba(255, 255, 255, 0.10);
  --glass-hi: rgba(255, 255, 255, 0.55);
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
  --transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----------------------------- ТЁМНАЯ (по умолчанию) ---------------------- */
:root[data-scheme="dark"] {
  --text: #eef2ff;
  --text-dim: rgba(238, 242, 255, 0.66);
  --bg-a: #0b1020;
  --bg-b: #0a0a17;
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: 1px solid rgba(255, 255, 255, 0.16);
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

/* ----------------------------- СВЕТЛАЯ ------------------------------------ */
:root[data-scheme="light"] {
  --text: #0d1330;
  --text-dim: rgba(13, 19, 48, 0.62);
  --bg-a: #eef2ff;
  --bg-b: #e6ecff;
  --glass-bg: rgba(255, 255, 255, 0.45);
  --glass-border: 1px solid rgba(255, 255, 255, 0.75);
  --glass-hi: rgba(255, 255, 255, 0.9);
  --shadow: 0 18px 50px rgba(60, 80, 160, 0.18);
}

/* ----------------------------- ПАЛИТРЫ ------------------------------------ */
/* Aurora (по умолчанию) */
:root[data-theme="aurora"] {
  --c1: #6d5efc;
  --c2: #22d3ee;
  --c3: #f472b6;
}
/* Sunset */
:root[data-theme="sunset"] {
  --c1: #ff8a3d;
  --c2: #ff3d77;
  --c3: #ffd166;
}
/* Mint */
:root[data-theme="mint"] {
  --c1: #22c55e;
  --c2: #14b8a6;
  --c3: #86efac;
}
/* Mono */
:root[data-theme="mono"] {
  --c1: #94a3b8;
  --c2: #64748b;
  --c3: #cbd5e1;
}
/* Taekwondo — тёмно-синий добок + небесный + золото медалей */
:root[data-theme="taekwondo"] {
  --c1: #1d4ed8;
  --c2: #38bdf8;
  --c3: #f5b301;
}

/* -------------------- ПЛАВНОЕ ПЕРЕКЛЮЧЕНИЕ ТЕМЫ --------------------------- */
/* Класс .theme-anim вешается на <html> в момент переключения и включает
   мягкие переходы для цвета, фона, границ и тени по всему интерфейсу. */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition: background-color 0.45s ease, color 0.45s ease,
    border-color 0.45s ease, box-shadow 0.45s ease, fill 0.45s ease,
    stroke 0.45s ease, opacity 0.45s ease !important;
}

/* Мягкая вспышка, сглаживающая смену фонового градиента */
.theme-flash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.theme-flash.on { opacity: 0.4; }