/* ============================================================================
   СветоРОД - themes.css
   Три темы как на доске app.svetorod.ru: Солнце / Небо / Космос (14.10.2026).
   Механика: <html data-theme="sun|sky|cosmos">, sun по умолчанию.
   Старые значения solar/slavic/night переводятся в новые скриптом в <head>
   и в main.js (solar -> sun, slavic -> sky, night -> cosmos).
   Космос тёмно-синий, не чёрный (правило школы). Славянское - украшением
   (буквица в base.css), во всех темах.
   ========================================================================== */

/* --- СОЛНЦЕ : тёплая, открывается первой ------------------------------------ */
:root[data-theme="sun"] {
  --bg: #fdf9f0;
  --bg-alt: #fbf3e2;
  --surface: #ffffff;
  --surface-2: #fcf6ea;

  --text: #3a2f20;
  --text-muted: #6a5a42;
  --heading: #2a2114;

  --accent: #e8a11c;
  --accent-2: #c96a17;
  --accent-contrast: #2a2114;

  --border: #e7dcc2;
  --link: #9c4f13;
  --link-hover: #7a3c0e;

  --glow: rgba(232, 161, 28, 0.34);
  --ray-color: rgba(232, 161, 28, 0.13);
  --shadow: rgba(120, 90, 35, 0.16);
  --focus-ring: #c96a17;
}

/* --- НЕБО : светло-голубая, мягкая для глаз малышей ------------------------- */
:root[data-theme="sky"] {
  --bg: #eaf2fc;
  --bg-alt: #dde9f8;
  --surface: #ffffff;
  --surface-2: #f2f7fd;

  --text: #1f2d4a;            /* на #eaf2fc ~12:1 */
  --text-muted: #4f6281;      /* на #eaf2fc ~5.6:1 (AA) */
  --heading: #17233d;

  --accent: #f0a31c;
  --accent-2: #2a64a8;        /* на #eaf2fc ~5.4:1 (AA) */
  --accent-contrast: #2a1d05;

  --border: #c3d5ee;
  --link: #24589a;
  --link-hover: #183f72;

  --glow: rgba(240, 163, 28, 0.30);
  --ray-color: rgba(42, 100, 168, 0.08);
  --shadow: rgba(40, 70, 120, 0.16);
  --focus-ring: #2a64a8;
}

/* --- КОСМОС : тёмно-синий, как на доске со 2 класса ------------------------- */
:root[data-theme="cosmos"] {
  --bg: #1c2257;
  --bg-alt: #232a68;
  --surface: #2c3580;
  --surface-2: #252c6b;

  --text: #eeeaf8;            /* на #1c2257 ~13:1 */
  --text-muted: #c3c6e6;      /* на #1c2257 ~8.5:1 */
  --heading: #fff6df;

  --accent: #f5cc6b;
  --accent-2: #ffd98a;
  --accent-contrast: #241a05;

  --border: #4553a6;
  --link: #f5cc6b;
  --link-hover: #ffe2a0;

  --glow: rgba(245, 204, 107, 0.30);
  --ray-color: rgba(159, 195, 240, 0.10);
  --shadow: rgba(8, 10, 40, 0.45);
  --focus-ring: #f5cc6b;
  color-scheme: dark;
}

/* ===========================================================================
   ДЕКОРАТИВНЫЕ СЛОИ
   =========================================================================== */

/* Солнце: тёплое свечение из верхних углов */
:root[data-theme="sun"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 46% at 0% 0%, rgba(232, 161, 28, 0.14), transparent 70%),
    radial-gradient(46% 38% at 100% 0%, rgba(201, 106, 23, 0.08), transparent 72%);
}
:root[data-theme="sun"] .hero-rays {
  background:
    conic-gradient(from 195deg at 6% -4%,
      rgba(232, 161, 28, 0.16) 0deg,
      transparent 42deg,
      transparent 300deg,
      rgba(255, 214, 130, 0.12) 344deg,
      rgba(232, 161, 28, 0.16) 360deg),
    radial-gradient(62% 60% at 4% 0%, rgba(255, 214, 130, 0.20), transparent 70%);
}

/* Небо: солнышко слева вверху и светлая дымка */
:root[data-theme="sky"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(50% 40% at 0% 0%, rgba(255, 215, 110, 0.20), transparent 70%),
    linear-gradient(180deg, rgba(150, 200, 245, 0.18), transparent 60%);
}
:root[data-theme="sky"] .hero-rays {
  background:
    radial-gradient(40% 50% at 8% 0%, rgba(255, 215, 110, 0.28), transparent 70%),
    radial-gradient(70% 60% at 90% 10%, rgba(255, 255, 255, 0.55), transparent 70%);
}

/* Космос: звёзды + северное сияние */
:root[data-theme="cosmos"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255, 255, 255, 0.75), transparent 60%),
    radial-gradient(1.3px 1.3px at 27% 68%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 44% 14%, rgba(255, 255, 255, 0.60), transparent 60%),
    radial-gradient(1.5px 1.5px at 61% 42%, rgba(255, 255, 255, 0.50), transparent 60%),
    radial-gradient(1.2px 1.2px at 76% 24%, rgba(255, 255, 255, 0.62), transparent 60%),
    radial-gradient(1.6px 1.6px at 87% 60%, rgba(255, 255, 255, 0.52), transparent 60%),
    radial-gradient(1.2px 1.2px at 34% 86%, rgba(255, 255, 255, 0.48), transparent 60%),
    radial-gradient(1.4px 1.4px at 69% 82%, rgba(255, 255, 255, 0.45), transparent 60%),
    radial-gradient(1.1px 1.1px at 54% 60%, rgba(255, 255, 255, 0.40), transparent 60%),
    radial-gradient(1.4px 1.4px at 18% 46%, rgba(255, 255, 255, 0.50), transparent 60%),
    radial-gradient(1.2px 1.2px at 92% 38%, rgba(255, 255, 255, 0.42), transparent 60%),
    linear-gradient(158deg, transparent 40%, rgba(110, 220, 190, 0.07) 52%, rgba(150, 120, 225, 0.08) 64%, transparent 80%);
}
:root[data-theme="cosmos"] .hero-rays {
  background:
    linear-gradient(148deg, transparent 34%, rgba(110, 220, 190, 0.10) 48%, rgba(150, 120, 225, 0.12) 62%, transparent 78%),
    radial-gradient(48% 50% at 86% 0%, rgba(245, 204, 107, 0.14), transparent 72%);
}
:root[data-theme="cosmos"] hr {
  border-top-color: var(--border);
  box-shadow: 0 0 6px var(--glow);
}
:root[data-theme="cosmos"] .section--alt {
  border-block: 1px solid var(--border);
}
:root[data-theme="cosmos"] .card,
:root[data-theme="cosmos"] .direction-card,
:root[data-theme="cosmos"] .note-card,
:root[data-theme="cosmos"] .material-card {
  box-shadow: 0 1px 3px rgba(8, 10, 40, 0.5), inset 0 0 0 1px rgba(245, 204, 107, 0.08);
}
:root[data-theme="cosmos"] .steps__num {
  box-shadow: 0 0 10px var(--glow);
}

/* карточки светлых тем - мягкая тень */
:root[data-theme="sun"] .card,
:root[data-theme="sun"] .direction-card,
:root[data-theme="sun"] .note-card,
:root[data-theme="sun"] .material-card,
:root[data-theme="sky"] .card,
:root[data-theme="sky"] .direction-card,
:root[data-theme="sky"] .note-card,
:root[data-theme="sky"] .material-card {
  box-shadow: 0 1px 3px var(--shadow);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme] body::before,
  :root[data-theme] body::after,
  :root[data-theme] .hero-rays {
    animation: none !important;
    transform: none !important;
  }
}