@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap');

/* ============================================================
   Силовой картель — Дизайн-токены
   Тема «Лунный остров»: античность, белый мрамор, ночной лес,
   светящаяся голубая вода, огромная луна. Тёмный фон + яркий голубой акцент.
   Структура — по дизайн-брифу Алисы (5 фонов, акцент+прозрачности, 4 текста, 4 семантики).
   ============================================================ */
:root {
  /* --- Сырая палитра --- */
  /* Сдвинуто в синеву (было бирюзово-зелёным): фоны держим в той же сине-ночной
     гамме, что и любимый CTA-блок клуба (--band-bg), без зеленоватого оттенка. */
  --navy-900:#050C18; --navy-800:#08111E; --navy-700:#0F1E30;
  --sky-500:#57C7F2; --sky-300:#9BE0FA; --blue-700:#2E9BD6;
  --silver:#C9D6DE; --moon:#F4FAFC;

  /* --- 1.1 Фоны (5) --- */
  --bg:#08131F;          /* основной фон — ночное синее небо/вода (не бирюза) */
  --surface:#0E1B2C;     /* карточки */
  --surface-2:#16273D;   /* вложенные блоки */
  --surface-3:rgba(87,199,242,.12);
  --border:rgba(255,255,255,.10);     /* границы */
  --border-strong:rgba(255,255,255,.20);
  --border-dim:rgba(255,255,255,.06); /* тусклые границы */

  /* --- 1.2 Акцент (100/50/28/12) --- */
  --accent:#57C7F2; --accent-hover:#7FD6F7;
  --accent-50:rgba(87,199,242,.50);
  --accent-28:rgba(87,199,242,.28);
  --accent-12:rgba(87,199,242,.12);
  --accent-soft-bg:rgba(87,199,242,.14);
  --accent-soft-text:#9BE0FA;

  /* --- 1.3 Текст (4) --- */
  --text:#EAF3F7; --text-2:#A7BECB; --text-muted:#6E8593;
  --heading:#F4FAFC; --text-mono:#7FD6F7;

  /* --- 1.4 Теги/семантика (4) --- */
  /* «sky-soft» теперь действительно голубая (была зелёной) — мягкие заливки
     иконок/callout-ов больше не дают зеленоватого оттенка. */
  --tag-tools:#6BA6FF; --tag-feature:#B79CFF; --tag-basic:#6FCF97; --tag-error:#E2607A;
  --sky-soft-bg:rgba(87,199,242,.14); --sky-soft-text:#9BE0FA;

  /* --- Декор/состояния --- */
  --navbar-bg:rgba(8,17,30,.82);
  --btn-secondary-bg:#162A33; --btn-secondary-hover:#1F3A45;
  --band-bg:radial-gradient(900px 420px at 78% -25%,rgba(87,199,242,.20),transparent 60%),#07111A;
  --hero-glow-1:rgba(87,199,242,.18); --hero-glow-2:rgba(155,224,250,.10);

  /* --- Типографика --- */
  --font-display:"Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-heading:"Manrope","Inter",-apple-system,"Segoe UI",sans-serif;  /* читаемые заголовки */
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-display:clamp(2.75rem,6vw,5rem);
  --fs-h1:clamp(2rem,4vw,3.25rem); --fs-h2:clamp(1.6rem,3vw,2.4rem); --fs-h3:1.4rem;
  --fs-lg:1.125rem; --fs-base:1rem; --fs-sm:.875rem; --fs-xs:.75rem;
  --lh-tight:1.1; --lh-snug:1.35; --lh-normal:1.7;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extra:800;
  --tracking-tight:-.01em; --tracking-wide:.16em;

  /* --- Отступы / скругления --- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem;
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* --- Тени / свечение --- */
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-md:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 22px 50px rgba(0,0,0,.55);
  --shadow-blue:0 14px 36px rgba(87,199,242,.30);
  --glow:0 0 30px rgba(87,199,242,.45);

  --container:1140px; --transition:.2s ease;
}

/* ============================================================
   СВЕТЛАЯ ТЕМА «Мраморный день» — [data-theme="light"]
   Тёмная остаётся по умолчанию (:root). Здесь переопределяются
   только цветовые токены: тёплый светлый мрамор, белые карточки,
   тёмный текст, более насыщенный голубой акцент для контраста.
   Структура/типографика/отступы наследуются из :root.
   ============================================================ */
[data-theme="light"] {
  /* --- Сырая палитра (светлая) --- */
  --moon:#0B1B24;            /* «луна» теперь = тёмный для заголовков на светлом */

  /* --- 1.1 Фоны (5) --- */
  --bg:#FFFFFF;              /* основной фон — белый */
  --surface:#FFFFFF;         /* карточки — белый */
  --surface-2:#EEF2F6;       /* вложенные блоки — прохладный светлый (не бежевый) */
  --surface-3:rgba(30,144,196,.10);
  --border:rgba(20,40,55,.14);
  --border-strong:rgba(20,40,55,.26);
  --border-dim:rgba(20,40,55,.08);

  /* --- 1.2 Акцент (насыщеннее для контраста на светлом) --- */
  --accent:#1E90C4; --accent-hover:#1576A4;
  --accent-50:rgba(30,144,196,.50);
  --accent-28:rgba(30,144,196,.28);
  --accent-12:rgba(30,144,196,.12);
  --accent-soft-bg:rgba(30,144,196,.12);
  --accent-soft-text:#15607F;

  /* --- 1.3 Текст (тёмный по светлому) --- */
  --text:#1B2A33; --text-2:#46606E; --text-muted:#74909E;
  --heading:#0B1B24; --text-mono:#1576A4;

  /* --- 1.4 Теги/семантика (затемнены для читаемости на белом) --- */
  /* «sky-soft» в синеву (была зелёной), чтобы мягкие заливки не зеленили светлую тему */
  --tag-tools:#2F6FE0; --tag-feature:#7B5BE0; --tag-basic:#2E9E63; --tag-error:#C8344F;
  --sky-soft-bg:rgba(30,144,196,.12); --sky-soft-text:#15607F;

  /* --- Декор/состояния --- */
  --navbar-bg:rgba(255,255,255,.85);
  --btn-secondary-bg:#FFFFFF; --btn-secondary-hover:#EEF2F6;
  --band-bg:radial-gradient(900px 420px at 78% -25%,rgba(30,144,196,.14),transparent 60%),#F4F7FA;
  --hero-glow-1:rgba(30,144,196,.16); --hero-glow-2:rgba(30,144,196,.08);

  /* --- Тени / свечение (мягче на светлом) --- */
  --shadow-sm:0 1px 2px rgba(20,40,55,.10);
  --shadow-md:0 8px 24px rgba(20,40,55,.14);
  --shadow-lg:0 22px 50px rgba(20,40,55,.18);
  --shadow-blue:0 14px 36px rgba(30,144,196,.22);
  --glow:0 0 26px rgba(30,144,196,.28);
}

/* Сырые навy-токены футера — на светлой теме мягче, чем #060D11 */
[data-theme="light"] .footer{background:#EEF2F6}
/* Праймари-кнопка: на светлой теме текст белый, а не тёмный */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-primary:hover{color:#FFFFFF}
/* Пирамида/чипы-solid используют тёмный текст #06222F — на акценте он читаем в обеих темах, оставляем */
[data-theme="light"] .pyr-row{color:#06222F}
/* Плавный переход между темами */
body{transition:background var(--transition),color var(--transition)}