/* =====================================================================
   Voca-Beat — ДИЗАЙН-ТОКЕНЫ (единственный источник правды)
   Источник: Claude Design → Voca-Beat Design System → colors_and_type.css
   Блок :root ниже перенесён из дизайн-системы без изменений.
   Правило: цвета, шрифты, радиусы, тени и отступы в теме берутся ТОЛЬКО
   отсюда. Новые значения сначала добавляются в дизайн-систему, затем сюда.
   ===================================================================== */

/* ---- Шрифты: self-hosted woff2, подмножество латиница + кириллица ---- */
@font-face { font-family: "Magistral"; src: url("../fonts/magistral-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Magistral"; src: url("../fonts/magistral-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Magistral"; src: url("../fonts/magistral-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Manrope";   src: url("../fonts/manrope-var.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "PT Sans";   src: url("../fonts/ptsans-400.woff2") format("woff2");  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PT Sans";   src: url("../fonts/ptsans-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "PT Sans";   src: url("../fonts/ptsans-700.woff2") format("woff2");  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "PT Sans";   src: url("../fonts/ptsans-700i.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

/* ---- Токены дизайн-системы (без изменений) ---- */
:root {
  /* ---------- Brand palette ---------- */
  --vb-gold:        #D0B639;   /* primary brand mark / accent gold     */
  --vb-gold-deep:   #B8982A;   /* pressed / darker gold                */
  --vb-gold-soft:   #E7D98A;   /* tints, highlights                    */

  --vb-red:         #A40F0F;   /* signature deep red (term posts)      */
  --vb-red-bright:  #C0392B;   /* coral red (portrait backdrops)       */

  --vb-purple:      #5D3580;   /* core brand purple — used actively    */
  --vb-purple-deep: #3F2259;   /* darker purple                        */

  --vb-ink:         #1A1A1A;   /* logo black / primary text            */
  --vb-ink-2:       #3A3A3A;   /* secondary text                       */
  --vb-ink-3:       #6E6E6E;   /* muted text / captions                */

  /* ---------- Seasonal / secondary ---------- */
  --vb-teal:        #195361;   /* festive dark teal                    */
  --vb-plum:        #290932;   /* doodle-banner deep plum              */
  --vb-burgundy:      #6B1530; /* event-calendar background (light)    */
  --vb-burgundy-deep: #380A18; /* event-calendar background (deep)     */
  --vb-burgundy-grad: radial-gradient(120% 80% at 80% 0%, #6B1530 0%, #4A0F20 55%, #380A18 100%); /* @kind color */

  /* ---------- Sky — schedule cards & handouts ---------- */
  --vb-sky:         #12BEF2;   /* bright cyan panel + top hairline rule */
  --vb-sky-pale:    #BDEDFB;   /* row pills inside a sky panel          */

  /* ---------- Кабинет ученика (student cabinet app) ---------- */
  --vb-app-bg:       #F1F0EC;  /* warm light-grey app canvas            */
  --vb-lavender:     #F0EDF5;  /* soft violet tag background            */
  --vb-lavender-ink: #57377D;  /* text on lavender                      */
  --vb-cream:        #F6F2DF;  /* gold-tinted tag background            */
  --vb-violet:       #6C4AA9;  /* individual-plan accent bar            */
  --vb-violet-tint:  #E7E1F1;  /* individual-plan card wash             */
  --vb-gold-bar:     #CAB964;  /* group-plan accent bar                 */
  --vb-gold-tint:    #F7F1DA;  /* group-plan card wash                  */
  --vb-danger:       #922216;  /* low-balance figure                    */

  /* ---------- Print handouts (A4 раздатка) ---------- */
  --vb-cream-paper: #F5F4EF;   /* warm cream print surface (not white)  */
  --vb-panel-ink:   #1B1B1B;   /* full-bleed dark panel                 */

  /* ---------- Level stages (уровни обучения) ------------------
     Three stages of the 15+ level ladder. Each has a solid accent and a
     pale wash for its "НА КАЖДОМ УРОВНЕ" note box.                  */
  --vb-stage-1:      #CCB43C;  /* Начальная   I–IV    (gold)             */
  --vb-stage-1-tint: #F0E8D3;
  --vb-stage-2:      #603084;  /* Средняя     V–VIII  (purple)           */
  --vb-stage-2-tint: #D9D1DC;
  --vb-stage-3:      #9C1824;  /* Продвинутая IX–XIV  (red)              */
  --vb-stage-3-tint: #E7D6CC;
  --vb-soft-grad:     radial-gradient(circle at 50% 42%, #EAEDF0 0%, #D2D9E0 60%, #C2C9D0 100%); /* @kind color */

  /* ---------- CTA gradient (site primary button) ---------- */
  --vb-cta-blue:    #4D8DDE;
  --vb-cta-purple:  #885ADB;
  --vb-cta-grad:    linear-gradient(90deg, var(--vb-cta-blue) 0%, var(--vb-cta-purple) 100%);

  /* ---------- Neutrals / surfaces ---------- */
  --vb-white:       #FFFFFF;
  --vb-paper:       #F7F6F2;   /* warm off-white page background        */
  --vb-mist:        #ECEEF1;   /* light grey panel (site "obuchenie")   */
  --vb-line:        #E2E0D9;   /* hairline borders                      */
  --vb-line-soft:   rgba(26,26,26,0.08);

  /* ---------- Type families ---------- */
  --font-brand:   "Magistral", "Manrope", system-ui, sans-serif;    /* wordmark / display */
  --font-display: "Manrope", "Magistral", system-ui, sans-serif;    /* thin caps headers  */
  --font-body:    "PT Sans", "Helvetica Neue", Arial, sans-serif;   /* running copy       */

  /* ---------- Type scale (px) ---------- */
  --fs-display: 72px;
  --fs-h1:      48px;
  --fs-h2:      34px;
  --fs-h3:      24px;
  --fs-lead:    20px;
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-caption: 12px;

  /* ---------- Radii ---------- */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  28px;   /* sky panels, app cards */
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --sh-card:  0 10px 28px rgba(26,26,26,0.10);
  --sh-soft:  0 4px 14px rgba(26,26,26,0.08);
  --sh-pop:   0 16px 40px rgba(26,26,26,0.18);

  /* ---------- Letter-spacing (tracking) ---------- */
  --tr-label: 0.22em;  /* tracked micro-caps labels (РАСПИСАНИЕ)  */
  --tr-caps:  0.12em;  /* eyebrow / nav caps                      */

  /* ---------- Spacing base (4px grid) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ---------- ДОБАВЛЕНО ТЕМОЙ: раскладка сайта ----------
     Значения взяты из ui_kits/website (Section, Header). Не являются
     частью дизайн-системы — при желании перенесите их туда.            */
  --container:       1100px;   /* основная колонка контента            */
  --container-wide:  1240px;   /* шапка                                */
  --gutter:          32px;     /* боковой отступ контейнера (десктоп)  */
  --section-y:       84px;     /* вертикальный отступ секции (десктоп) */
  --ease-out:        cubic-bezier(.2,.7,.3,1);
  --dur-fast:        150ms;

  /* ---------- ДОБАВЛЕНО ТЕМОЙ: макет «Подарочные сертификаты» ----------
     Из handoff-пакета Claude Design (глобальные шапка, футер, страница
     сертификатов). Кандидаты на перенос в дизайн-систему.               */
  /* Раскладка «во всю ширину»: фоны от края до края, контент до 1600px */
  --page-max:        1600px;
  --page-pad:        clamp(20px, 5vw, 80px);   /* поля секций            */
  --chrome-pad:      clamp(16px, 4vw, 64px);   /* поля шапки и футера    */
  --page-section-y:  clamp(56px, 8vw, 120px);  /* вертикальный отступ    */
  --scroll-offset:   150px;                    /* scroll-margin-top якорей */
  --ease-soft:       cubic-bezier(.2,.8,.2,1);

  --vb-gold-line:    linear-gradient(90deg, #D0B639, #E7D98A, #D0B639); /* полоска 4px сверху */

  /* Тёплый графит футера и «стекло» навигации */
  --vb-graphite:       #2B2926;
  --vb-graphite-2:     #232120;
  --vb-graphite-3:     #1F1D1B;
  --vb-graphite-4:     #121110;
  --vb-glass:          rgba(38, 36, 33, .84);
  --vb-cream-ink:      #F5F4EF;  /* светлый текст на графите (= --vb-cream-paper) */
  --vb-night:          #0D0A18;  /* фон первого экрана сертификатов          */
  --vb-telegram:       #12BEF2;  /* = --vb-sky, кнопка «Написать в Телеграм» */

  /* Цвета линий метро */
  --metro-pushkinskaya: #943E90;
  --metro-chekhovskaya: #ACADAF;
  --metro-arbatskaya:   #0252A2;

  --vb-purple-grad: radial-gradient(120% 90% at 85% 0%, #5D3580 0%, #3F2259 50%, #290932 100%);

  /* ---------- ДОБАВЛЕНО ТЕМОЙ: страница «Цены» (v0.3) ---------- */
  --vb-stage-1-wash: #F3ECD8;
  --vb-stage-1-pale: #F8F3E4;  /* MASTER */
  --vb-stage-2-wash: #E6E0EA;
  --vb-stage-2-pale: #F1EDF3;  /* MAESTRO */
  --vb-stage-3-wash: #EFE2DB;
  --vb-stage-3-pale: #F6EDE8;  /* GRANDE MAESTRO */
  --vb-line-warm:    #D9D4C8;
  --vb-gold-ring:    #EFE6C4;  /* тонкие декоративные круги */
  --sh-flat:         0 4px 14px rgba(26,26,26,.06);

  /* ---------- ДОБАВЛЕНО ТЕМОЙ: страница «Команда» (v0.4) ---------- */
  --vb-frame:        #ECEBE7;  /* широкая серая рамка карточки педагога */
  --vb-frame-warm:   #E6DDBE;  /* рамка в активном состоянии */
  --vb-ink-25:       #555555;  /* должность на карточке */
  --metro-pushkinskaya-light: #B86BB4; /* «М» Пушкинской на тёмном фоне */
  --sh-photo:        0 10px 28px rgba(26,26,26,.12);
  --sh-lift:         0 34px 60px -28px rgba(26,26,26,.38);
  --ease-luxe:       cubic-bezier(.16,1,.3,1);

  /* ---------- ДОБАВЛЕНО ТЕМОЙ: макет «Контакты» ---------- */
  --vb-staff-line:   #CFC6A8;  /* линии нотного стана между филиалами */
  --vb-online:       #3BB54A;  /* «онлайн», капча пройдена */
  --vb-yandex:       #FC3F1D;  /* значок «Я» Яндекс Карт */
  --vb-telegram-brand: #229ED9; /* круг Telegram у администратора */
  --vb-overlay:      rgba(15,12,8,.6);  /* подложка окна «Как добраться» */
  --sh-admin:        0 24px 50px -24px rgba(26,26,26,.45);
  /* ---------- ДОБАВЛЕНО ТЕМОЙ: макет «Словарь терминов» ---------- */
  --vb-term-red:      #A40F0F;  /* карточка термина (= --vb-red)            */
  --vb-term-red-dark: #860C0C;  /* оборот карточки термина                  */
  --vb-term-ring:     #E8E8E8;  /* обводка круглой карточки                 */
  --vb-track:         #F1F0EC;  /* подложка прогресс-баров и переключателей */
  --vb-gold-dark:     #9C7F1E;  /* тёмное золото (ножка кубка)              */
}

@media (max-width: 760px) {
  :root {
    --gutter:    16px;
    --section-y: 56px;
  }
}