/* =====================================================================
   FitStars Corporate Portal — Design Tokens
   ---------------------------------------------------------------------
   Единый источник правды: правки ТОЛЬКО здесь, затем синхронизируй
   docs/DESIGN-SYSTEM.md (таблицы), assets/styles/design-tokens.json,
   docs/FIGMA-CSS-MAP.md, docs/CHANGELOG-DS.md.

   --ds-version см. :root. Машиночитаемое зеркало: design-tokens.json
   (без var()-цепочек в значениях — только литералы для JSON).

   Порядок приоритета: tokens.css  >  DESIGN-SYSTEM.md  >  SOURCE/CONTRACT
   (см. docs/DESIGN-SYSTEM.md §0).

   Файл подключается первым в любом HTML-документе портала:
       <link rel="stylesheet" href="/assets/styles/tokens.css">

   Не редактируй переменные «на месте» в страницах — меняй здесь.
   Стенгазета (/weekly/*) использует свой набор переменных поверх
   этого файла. См. docs/WEEKLY-STYLE.md.
   ===================================================================== */


/* =====================================================================
   ШРИФТЫ — Gilroy (локальные файлы, без CDN)
   ===================================================================== */

@font-face {
  font-family: 'Gilroy';
  src: url('/assets/fonts/Gilroy/Gilroy-Regular.woff2') format('woff2'),
       url('/assets/fonts/Gilroy/Gilroy-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('/assets/fonts/Gilroy/Gilroy-Medium.woff2') format('woff2'),
       url('/assets/fonts/Gilroy/Gilroy-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('/assets/fonts/Gilroy/Gilroy-SemiBold.woff2') format('woff2'),
       url('/assets/fonts/Gilroy/Gilroy-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('/assets/fonts/Gilroy/Gilroy-Bold.woff2') format('woff2'),
       url('/assets/fonts/Gilroy/Gilroy-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('/assets/fonts/Gilroy/Gilroy-ExtraBold.woff2') format('woff2'),
       url('/assets/fonts/Gilroy/Gilroy-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* «Gilroy-Bold» как отдельное имя — для совместимости со старым кодом
   (index.html стенгазеты использует именно это имя). */
@font-face {
  font-family: 'Gilroy-Bold';
  src: url('/assets/fonts/Gilroy/Gilroy-Bold.woff2') format('woff2'),
       url('/assets/fonts/Gilroy/Gilroy-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


:root {

  /* Версия DS (меняй при правке токенов; дублируй в design-tokens.json) */
  --ds-version: "1.1.1";

  /* ====================================================================
     БРЕНД
     ================================================================== */

  --color-brand:        #EF16B0;
  --color-brand-light:  #FFD0EF;
  --color-brand-soft:   #FFEAF8;
  --color-ink:          #181D31;
  --color-bright:       #FFFFFF;


  /* ====================================================================
     СЕМАНТИЧЕСКИЕ ЦВЕТА — ТЕКСТ
     ================================================================== */

  --text-primary:       #181D31;
  --text-secondary:     #414657;
  --text-tertiary:      #7A8096;
  --text-passive:       #A7AAB7;
  --text-on-dark:       #F8F8F8;
  --text-link:          #EF16B0;


  /* ====================================================================
     СЕМАНТИЧЕСКИЕ ЦВЕТА — ПОВЕРХНОСТИ
     ================================================================== */

  --sur-primary:        #FFFFFF;
  --sur-secondary:      #F3F3F6;
  --sur-tertiary-alpha: rgba(255, 255, 255, 0.6);
  --sur-progress-back:  #E7E7EC;
  --sur-warm:           #FEF6EB;
  --sur-card-hover:     rgba(24, 29, 49, 0.04);
  --sur-overlay:        rgba(24, 29, 49, 0.6);


  /* ====================================================================
     СЕМАНТИЧЕСКИЕ ЦВЕТА — ГРАНИЦЫ
     ================================================================== */

  --bord-primary:       #D3D5DA;
  --bord-field:         #D3D5DA;
  --bord-field-error:   #FE434C;
  --bord-strong:        #9DA5C4;


  /* ====================================================================
     КНОПОЧНЫЕ ПОВЕРХНОСТИ
     ================================================================== */

  --btn-primary:        #08C408;
  --btn-pink:           #EF16B0;
  --btn-secondary:      #FFFFFF;
  --btn-chip:           #F3F3F6;
  --btn-tertiary:       #9DA5C4;
  --btn-critical:       #FE434C;
  --btn-ghost:          transparent;


  /* ====================================================================
     ФУНКЦИОНАЛЬНЫЕ
     ================================================================== */

  --accent:             #EF16B0;
  --positive:           #08C408;
  --warned:             #FE434C;
  --interactive:        #EF16B0;
  --ic-primary:         #181D31;
  --ic-on-dark:         #FFFFFF;


  /* ====================================================================
     БРЕНД SECONDARY — пастельные акценты для маркетинговых блоков
     (см. BRAND.md, использовать только в баннерах и hero-блоках)
     ================================================================== */

  --c-brand-secondary-1:  #CBC1F0;
  --c-brand-secondary-2:  #B0D8F6;
  --c-brand-secondary-3:  #FFCDAD;
  --c-brand-secondary-4:  #FFBCBC;
  --c-brand-secondary-5:  #FFD0EF;
  --c-brand-secondary-6:  #EAC5F2;
  --c-brand-secondary-7:  #BCE8B9;
  --c-brand-secondary-8:  #B0EBDD;
  --c-brand-secondary-9:  #A9E6F4;
  --c-brand-secondary-10: #D2F19D;
  --c-brand-secondary-11: #F7F791;
  --c-brand-secondary-12: #FFE796;


  /* ====================================================================
     ТИПОГРАФИКА — стек шрифтов
     ================================================================== */

  --font-display: 'Gilroy-Bold', 'Gilroy', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Gilroy', system-ui, -apple-system, 'Segoe UI', sans-serif;


  /* ====================================================================
     ТИПОГРАФИКА — веса
     ================================================================== */

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


  /* ====================================================================
     ТИПОГРАФИКА — размеры (Desktop)
     ================================================================== */

  --fs-xxs:         12px;
  --fs-xs:          14px;
  --fs-s:           16px;
  --fs-m:           18px;
  --fs-l:           20px;
  --fs-xl:          24px;
  --fs-2xl:         36px;
  --fs-3xl:         40px;
  --fs-4xl:         50px;


  /* ====================================================================
     ТИПОГРАФИКА — line-height
     ================================================================== */

  --lh-xxs:         16px;
  --lh-xs:          20px;
  --lh-s:           22px;
  --lh-m:           26px;
  --lh-l:           28px;
  --lh-xl:          32px;
  --lh-2xl:         44px;
  --lh-3xl:         48px;
  --lh-4xl:         58px;


  /* ====================================================================
     ТИПОГРАФИКА — letter-spacing
     ================================================================== */

  --ls-base:        0;
  --ls-broad:       0.15px;
  --ls-broader:     0.2px;


  /* ====================================================================
     ОТСТУПЫ — numeric шкала
     ================================================================== */

  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        20px;
  --space-6:        24px;
  --space-8:        32px;
  --space-10:       40px;
  --space-12:       48px;
  --space-16:       64px;
  --space-20:       80px;
  --space-24:       96px;
  --space-32:       128px;


  /* ====================================================================
     ОТСТУПЫ — семантические утилиты (mapping на Figma spacing/*)
     ================================================================== */

  --space-padding-web:        32px;
  --space-gap-blocks:         14px;
  --space-gap-filters:        14px;
  --space-gap-section-headers: 26px;
  --space-gap-content-m:      44px;
  --space-gap-content-l:      60px;
  --space-input-pad:          12px;
  --space-input-gap:          8px;
  --space-chip-gap:           12px;


  /* ====================================================================
     СКРУГЛЕНИЯ — Figma Design system, ноды 16248:4992 «Border Radius»
     + отдельные привязки (модалка, коммуникации)
     Маппинг Utility: radius/XS…radius/XL (Figma) = шкала ниже.
     НЕ путать: семантика `radius/xl` = 24px (модалка) с «XL radius» = 10px в
     той же таблице — в коде и переменных это разные токены.
     ================================================================== */

  /* Кнопки — имена из Figma */
  --radius-button-pill:    50px;  /* button-pill-corners */
  --radius-button-square:  12px;  /* button-square-corners */

  /* Утилитарная шкала (XS … XL) */
  --radius-utility-xs:  3px;   /* XS radius — баджи до ~30px высотой */
  --radius-utility-s:   5px;   /* S radius — баджи от ~30px */
  --radius-utility-m:   6px;   /* M radius — малые карточки */
  --radius-utility-l:   8px;   /* L radius — поля, средние карточки */
  --radius-utility-xl:  10px;  /* XL radius — крупные баннеры/карточки (не модалка) */

  /* Семантика привязок из компонентов (ModalWork и др.) */
  --radius-surface-modal:  24px;  /* Figma var radius/xl на оболочке модалки */

  /* Public / брендбук: панели коммуникаций (см. docs/BRAND.md) */
  --radius-communications:  40px;

  /* Совместимость: короткие имена (старые черновики / preview.html) */
  --radius-pill:     var(--radius-button-pill);
  --radius-field:    var(--radius-utility-l);
  --radius-circle:   9999px;
  --radius-xs:       var(--radius-utility-m);
  --radius-s:        var(--radius-utility-l);
  --radius-m:        var(--radius-button-square);
  --radius-l:        var(--radius-utility-xl);
  --radius-xl:       var(--radius-surface-modal);
  --radius-banner:   var(--radius-communications);


  /* ====================================================================
     ТЕНИ
     ================================================================== */

  --shadow-1:       0 1px 3px 1px rgba(24, 29, 49, 0.06);
  --shadow-2:       0 1px 3px 1px rgba(24, 29, 49, 0.04),
                    0 4px 15px 2px rgba(24, 29, 49, 0.06);
  --shadow-banner:  0 0 40px rgba(0, 0, 0, 0.03);
  --shadow-modal:   0 20px 60px rgba(24, 29, 49, 0.18);


  /* ====================================================================
     ИКОНКИ
     ================================================================== */

  --icon-xs:        16px;
  --icon-s:         18px;
  --icon-m:         24px;
  --icon-l:         28px;


  /* ====================================================================
     MOTION
     ================================================================== */

  --motion-quick:   150ms;
  --motion-base:    200ms;
  --motion-slow:    320ms;
  --ease-out:       cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);


  /* ====================================================================
     LAYOUT — референс Figma «Products» (только сетка)
     См. docs/LAYOUT-PORTAL.md, фреймы Media --logged in / logged out, 1440
     ================================================================== */

  --page-width:            1440px;
  --page-pad-x:            100px;
  --content-width:         1240px;
  --section-gap:           40px;   /* вертикально между крупными блоками */
  --section-header-gap:     24px;   /* H1 / секция → контент (32 + 24 = 56) */
  --layout-col-gap:         40px;   /* герой: 815 + 40 + 385 */
  --card-gap:               40px;   /* зазор между карточками в ряду */
  --grid-row-gap:           28px;   /* 5×N сетка категорий в продукте */
  --header-h:                80px;   /* навигационная шапка (logged in) */
  --footer-media-h:          285px;  /* Footer media, как в макете */

  /* Старые имена: контейнер = та же 1240-зона, паддинги — из page-pad */
  --container-max:          var(--content-width);
  --container-pad-mobile:   16px;
  --container-pad-tablet:   32px;
  --container-pad-desktop:  var(--page-pad-x);

  --bp-sm:                  480px;
  --bp-md:                  768px;
  --bp-lg:                  1024px;
  --bp-xl:                  1280px;


  /* ====================================================================
     Z-INDEX
     ================================================================== */

  --z-header:       100;
  --z-dropdown:     200;
  --z-toast:        300;
  --z-modal:        400;
  --z-overlay:      390;
}


/* =====================================================================
   БАЗОВЫЕ СБРОСЫ И ТИПОГРАФИКА
   ===================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  font-weight: var(--fw-regular);
  color: var(--text-primary);
  background: var(--sur-primary);
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  letter-spacing: var(--ls-base);
}

h1 { font-size: var(--fs-3xl); line-height: var(--lh-3xl); }
h2 { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
h3 { font-size: var(--fs-xl);  line-height: var(--lh-xl);  }
h4 { font-size: var(--fs-l);   line-height: var(--lh-l);   font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-m);   line-height: var(--lh-m);   font-weight: var(--fw-semibold); }
h6 { font-size: var(--fs-s);   line-height: var(--lh-s);   font-weight: var(--fw-semibold); }

p {
  font-size: var(--fs-s);
  line-height: var(--lh-s);
  color: var(--text-primary);
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--motion-quick) var(--ease-out);
}

a:hover {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-utility-xs);
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

::selection {
  background: var(--color-brand-light);
  color: var(--text-primary);
}


/* =====================================================================
   АДАПТИВ — типографика на узких экранах
   ===================================================================== */

@media (max-width: 768px) {
  h1 { font-size: clamp(var(--fs-2xl), 8vw, var(--fs-3xl)); line-height: 1.15; }
  h2 { font-size: clamp(var(--fs-xl),  6vw, var(--fs-2xl)); line-height: 1.2; }
  h3 { font-size: clamp(var(--fs-l),   5vw, var(--fs-xl));  line-height: 1.25; }
}


/* =====================================================================
   REDUCED MOTION — глобальное отключение анимаций
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =====================================================================
   УТИЛИТЫ — visually-hidden (скрытие для зрячих, доступно для AT)
   ===================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* =====================================================================
   КОНТЕЙНЕР
   ===================================================================== */

.container {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--container-pad-mobile);
}

@media (min-width: 768px) {
  .container { padding: 0 var(--container-pad-tablet); }
}

@media (min-width: 1024px) {
  .container { padding: 0 var(--page-pad-x); }
}