/* =============================================================
   Дизайн-токены, выгруженные из Figma "Matrici Muziki"
   UI Kit: node 74:604 (file AccPJ0lnXU6pCNJk9GgM6v)
   Источник истины. Любые правки — только если изменился Figma.

   Алиасы (--gold, --ink, ...) сохранены для совместимости со
   старым main.css; новые компоненты используют --color-*, --fs-*,
   --space-*, --radius-*, --shadow-*.
   ============================================================= */

:root {
  /* ---------- ЦВЕТА ---------- */

  /* Брендовый/акцентный (золото) */
  --color-primary:        #D9B601;
  --color-primary-hover:  #C8AC1B;
  --color-primary-80:     rgba(217, 182, 1, 0.8);
  --color-primary-soft:   #FFDD2D;   /* подсветка текста на login */

  /* Текст / тёмные */
  --color-black:          #000000;
  --color-ink:            #111111;
  --color-ink-80:         rgba(17, 17, 17, 0.8);
  --color-ink-56:         rgba(17, 17, 17, 0.56);
  --color-black-56:       rgba(0, 0, 0, 0.56);

  /* Серая шкала */
  --color-grey-900:       #2B2A29;
  --color-grey-800:       #434242;
  --color-grey-700:       #5B5B5B;
  --color-grey-600:       #727271;
  --color-grey-500:       #838383;
  --color-grey-450:       #8B99B3; /* пунктир upload */
  --color-grey-400:       #ABABAB; /* disabled */
  --color-grey-300:       #B2B3B3;
  --color-grey-200:       #C5C6C6;

  /* Поверхности */
  --color-white:          #FFFFFF;
  --color-white-80:       rgba(255, 255, 255, 0.8);
  --color-off-white:      #FEFEFE;

  /* Семантические */
  --color-success:        #00C974; /* «урок пройден» */
  --color-error:          #FF2D31; /* logout / ошибка */
  --color-error-80:       rgba(255, 45, 49, 0.8);

  /* ---------- ТИПОГРАФИКА ----------
     Figma: Montserrat Alternates — все заголовки лендинга (96/32);
     Manrope — body, кнопки, формы, UI Kit;
     Sacramento — подпись «Белецкого». */
  --font-sans: "Manrope", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Montserrat Alternates", "Manrope", "Inter",
                  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-script:  "Sacramento", "Cormorant Garamond", cursive;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Размеры из UI Kit */
  --fs-12: 12px;  /* error / micro */
  --fs-14: 14px;  /* caption, small CTA, legal */
  --fs-16: 16px;  /* body, кнопки */
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;  /* заголовок модалки */
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-56: 56px;  /* hero */

  /* Line-height */
  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.6;
  --lh-legal:  18px; /* legal text 14/18 — фикс из Figma */

  /* ---------- РАДИУСЫ ---------- */
  --radius-none:  0;
  --radius-xs:    4px;   /* checkbox */
  --radius-sm:    5px;   /* служебные карточки */
  --radius-md:    10px;  /* upload-зона */
  --radius-lg:    12px;  /* карточки/модалки */
  --radius-pill:  36px;  /* primary-кнопки */
  --radius-pill-lg: 100px; /* pill-инпуты, login-кнопка */
  --radius-circle:  1000px; /* аватары/круглые медальоны */

  /* ---------- ТЕНИ ---------- */
  --shadow-glow-soft: 0 0 4px 0 rgba(178, 151, 15, 0.4);
  --shadow-glow-gold: 2px 1px 12px 0 rgba(217, 182, 1, 1);
  --shadow-glow-gold-strong: 2px 4px 12px 0 rgba(217, 182, 1, 1);
  /* Общая «карточная» тень — не из Figma, синтетика для прод-нужд */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.06);

  /* ---------- ОТСТУПЫ / СЕТКА ---------- */
  --space-2:  2px;
  --space-4:  4px;
  --space-8:  8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-38: 38px; /* horiz. padding primary CTA */
  --space-40: 40px; /* padding модальных карточек */

  /* Контейнер */
  --container-max:    1280px; /* десктоп-контейнер */
  --container-padding: 32px;

  /* ---------- БРЕЙКПОИНТЫ (из Figma: 390 mobile, 1440 desktop) ---------- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;

  /* ---------- АЛИАСЫ для совместимости со старым main.css ---------- */
  --gold:       var(--color-primary);
  --gold-2:     var(--color-primary-soft);
  --gold-light: var(--color-primary-80);
  --black:      var(--color-ink);
  --ink:        var(--color-ink);
  --grey-1:     #F7F7F7;                  /* старый фон, не из Figma */
  --grey-2:     var(--color-grey-200);
  --grey-3:     var(--color-grey-300);
  --grey-4:     var(--color-grey-600);
  --green:      var(--color-success);
  --green-light: #C8EDD6;                 /* legacy, не из Figma */
  --red:        var(--color-error);
  --white:      var(--color-white);
  --shadow:     var(--shadow-card);
  --radius:     var(--radius-lg);
  --max-w:      var(--container-max);
  --radius-pill: var(--radius-circle); /* legacy перекрывает новый, см. ниже */
}

/*
   ⚠️ Имя --radius-pill ранее значило «999px» (полный круг).
   Чтобы не сломать существующие компоненты, оставляем legacy-значение
   через алиас выше. Новый код используйте --radius-pill-lg (100px) или
   --radius-circle (1000px).
*/