/* ============================================================
   WINCLASS — DESIGN TOKENS  (единственный источник правды)
   Опора: WINCLASS_BRAND_KIT (2).md + мастер-план v1.1
   Правило бренда: белый фон всегда, тёмная тема не делается.
   Меняешь цвет/размер бренда — только здесь.
   ============================================================ */

:root{
  /* ---------- БРЕНД-ТРИАДА ---------- */
  --lime:#59FF3A;        --lime-rgb:89,255,58;      /* главный акцент, CTA, логотип */
  --teal:#46D2D2;        --teal-rgb:70,210,210;     /* ссылки, вторичный акцент */
  --purple:#BF80FF;      --purple-rgb:191,128,255;  /* бейджи, декор */
  /* Тёмные варианты бренда — для ТЕКСТА. Яркие лайм, бирюза и фиолет
     остаются заливкой, градиентом, иконкой и границей; текстом они не
     проходят по контрасту, и это измерено, а не на глаз:
       #46D2D2 на белом — 1.84 при пороге 4.5;
       #2FA80F на бледно-лаймовом бейдже — 3.00;
       #94A3B8 (подписи) на фоне страницы — 2.45.
     Ниже подобраны варианты, проходящие на всех трёх фонах сайта. */
  --lime-ink:#227C0A;    /* 5.31 на белом, 5.10 на бледно-лаймовом */
  --teal-ink:#0E7C7B;    /* 5.01 / 4.79 / 4.58 — ссылки и акцентный текст */
  --purple-ink:#6B2FB0;  /* 7.90 на белом, 6.96 на бледно-фиолетовом */

  /* ---------- ГРАДИЕНТЫ ---------- */
  --grad-primary:linear-gradient(135deg,#59FF3A,#46D2D2);
  --grad-rainbow:linear-gradient(90deg,#59FF3A,#46D2D2,#BF80FF);
  --grad-rainbow-v:linear-gradient(180deg,#59FF3A,#46D2D2,#BF80FF);
  --grad-teal:linear-gradient(135deg,#46D2D2,#2EB4D4);
  --grad-purple:linear-gradient(135deg,#BF80FF,#9966CC);
  --grad-teal-purple:linear-gradient(135deg,#46D2D2,#BF80FF);

  /* ---------- НЕЙТРАЛЬНЫЕ ---------- */
  --text:#2D3748;        /* основной текст */
  --text-2:#64748B;      /* вторичный */
  --text-muted:#5F6E85;  /* мелкий/подписи: 5.18 / 4.95 / 4.73 */
  --text-faint:#94A3B8;  /* только для НЕтекста: разделители, иконки-точки */
  --bg:#F8FAFC;          /* фон страницы */
  --bg-card:#FFFFFF;     /* карточки */
  --bg-card-rgb:255,255,255;
  --bg-subtle:#F1F5F9;   /* лёгкие зоны */
  --bg-ink:#0F1530;      /* тёмная плашка ТОЛЬКО в живых демо (консоль/урок) */
  --border:rgba(0,0,0,.06);
  --border-2:rgba(0,0,0,.10);

  /* ---------- СЕМАНТИЧЕСКИЕ ---------- */
  --success:#2FA80F;
  --error:#FF3B59;
  --warning:#F59E0B;
  --live:#FF3B59;

  /* ---------- ТИПОГРАФИКА ---------- */
  --font:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  /* флюидная шкала (компактная) */
  --fs-display:clamp(28px,3.6vw,44px);
  --fs-h1:clamp(24px,3vw,36px);
  --fs-h2:clamp(21px,2.4vw,29px);
  --fs-h3:clamp(17px,1.6vw,20px);
  --fs-lead:clamp(15px,1.2vw,17px);
  --fs-body:15.5px;
  --fs-small:13px;
  --fs-caption:12px;
  --lh-tight:1.08;
  --lh-snug:1.25;
  --lh-body:1.6;

  /* ---------- ОТСТУПЫ (база 4px) ---------- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px;
  --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px;
  --s-20:80px; --s-24:96px;

  /* ---------- РАДИУСЫ ---------- */
  --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:20px; --r-2xl:28px; --r-pill:999px;

  /* ---------- ТЕНИ ---------- */
  --sh-s:0 1px 3px rgba(0,0,0,.06);
  --sh-m:0 4px 12px rgba(0,0,0,.08);
  --sh-l:0 12px 40px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.06);
  --sh-lime:0 4px 16px rgba(89,255,58,.28);
  --sh-lime-strong:0 8px 32px rgba(89,255,58,.38);
  --sh-teal:0 4px 16px rgba(70,210,210,.25);
  --sh-purple:0 4px 16px rgba(191,128,255,.25);

  /* ---------- ДВИЖЕНИЕ ---------- */
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:150ms; --t:250ms; --t-slow:350ms;

  /* ---------- РАСКЛАДКА ---------- */
  --container:1200px;
  --container-wide:1440px;
  --header-h:72px;
  --bottom-h:64px;
  --z-header:100; --z-bottomnav:90; --z-modal:200; --z-orb:-1;
}

/* уважение к пользователю, снизившему анимации */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

/* ============================================================
   ПРЕМИУМ-СЛОЙ ДЛЯ ШКОЛЬНОГО САЙТА
   Добавка к базовым токенам, а не второй их набор: базу трогать
   нельзя — она общая с winclass.ru, и правка там уедет туда же.
   Здесь только то, чего в базе нет: тёмные поверхности, тонкие
   границы-градиенты и шкала крупной типографики.
   ============================================================ */
:root{
  /* ---------- ТЁМНЫЕ ПОВЕРХНОСТИ ----------
     Правило бренда «белый фон всегда» остаётся: тёмными делаются
     отдельные плашки — экономика и финальный призыв. Они читаются
     как другой материал, а не как тёмная тема сайта. */
  --ink:#0B1020;          --ink-rgb:11,16,32;
  --ink-2:#131A31;        /* карточка на тёмном */
  --ink-3:#1C2540;        /* граница на тёмном */
  --on-ink:#F4F7FB;       /* текст на тёмном */
  --on-ink-2:#9AA8C0;     /* вторичный текст на тёмном */

  /* ---------- ПРЕМИУМ-АКЦЕНТЫ ---------- */
  --gold:#F0B429;         --gold-rgb:240,180,41;   /* пьедестал, «включено» */
  --grad-ink:linear-gradient(160deg,#0B1020 0%,#131A31 55%,#101A38 100%);
  --grad-hair:linear-gradient(120deg,rgba(89,255,58,.55),rgba(70,210,210,.55),rgba(191,128,255,.55));
  --grad-gold:linear-gradient(135deg,#F0B429,#FF8A3D);

  /* ---------- ТЕНИ ПРЕМИУМ-СЛОЯ ---------- */
  --sh-xl:0 24px 70px rgba(15,21,48,.16),0 4px 12px rgba(15,21,48,.06);
  --sh-ink:0 30px 80px rgba(11,16,32,.38);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.6);

  /* ---------- КРУПНАЯ ТИПОГРАФИКА ---------- */
  --fs-hero:clamp(32px,4.4vw,56px);
  --fs-num:clamp(30px,3.4vw,42px);
}