/* ============================================================================
   C.Nord — Design Tokens (публичная копия)
   Источник истины: notpublic/design-system/tokens.css. Держать в синхроне.
   Семантические роли цвета/типографики/ритма для дизайн-системы cnord.ru.
   Подключать первым, до site-chrome.css: <link rel="stylesheet" href="css/tokens.css">
   ========================================================================== */

:root {
  /* ── Цвет: бренд ─────────────────────────────── */
  --color-brand:         #5A57A2;  /* основной бренд/action (кнопки, ссылки, акценты) */
  --color-brand-hover:   #7370B8;  /* ховер основной кнопки */
  --color-brand-active:  #9C9AC7;  /* нажатие / светлый бренд-тинт, акцентные карточки */

  /* ── Цвет: текст и тёмные панели ─────────────── */
  --color-ink:           #2E3034;  /* основной текст, тёмные панели */
  --color-on-brand:      #FFFFFF;  /* текст на бренд/тёмном фоне */
  --color-muted:         #5A5C60;  /* вторичный текст */
  --color-muted-2:       #959595;  /* приглушённые подписи */
  --color-muted-on-dark: #ACACAC;  /* вторичный текст на тёмных панелях */

  /* ── Цвет: поверхности и границы ─────────────── */
  --color-surface:       #FFFFFF;  /* базовый фон */
  --color-surface-2:     #FAFAFA;  /* лёгкая подложка секций */
  --color-surface-3:     #EAEAE8;  /* светло-серая карточка/панель */
  --color-border:        #E6E6E4;  /* тонкие границы, разделители */

  /* ── Цвет: доп. акценты (использовать редко) ──── */
  --color-accent-green:  #00CF7F;  /* опционально: success / вторичный акцент */
  --color-accent-teal:   #CFE7E2;  /* опционально: фон кейс-карточек, метка #0B8C77 */
  --color-accent-teal-ink:#0B8C77; /* метка/текст на teal-фоне */
  --color-accent-yellow: #FFE14D;  /* опционально: акцент на тёмном фоне */

  /* ── Типографика ─────────────────────────────── */
  --font-sans: circe, "Segoe UI", system-ui, -apple-system, sans-serif; /* Circe — фирменный */

  /* Шкала на clamp(): min, предпочт. (vw), max */
  --text-h1:      clamp(40px, 6vw,   72px);  /* line-height ~100%, weight 700 */
  --text-h2:      clamp(32px, 4.5vw, 56px);  /* lh ~110%, weight 700 */
  --text-h3:      clamp(24px, 3vw,   36px);  /* lh ~115%, weight 600 */
  --text-lead:    clamp(18px, 2vw,   24px);  /* lh ~140%, weight 400 */
  --text-body:    17px;                      /* lh 150%, weight 400 */
  --text-small:   14px;                      /* lh 145% */
  --text-eyebrow: 14px;   /* uppercase, letter-spacing .06em, weight 700 (метки «01 —») */

  /* line-height роли (в пару к шкале выше) */
  --lh-h1: 1.0;  --lh-h2: 1.1;  --lh-h3: 1.15;  --lh-lead: 1.4;
  --lh-body: 1.5;  --lh-small: 1.45;

  /* font-weight роли */
  --weight-regular: 400;  --weight-semibold: 600;  --weight-bold: 700;

  /* ── Отступы (rhythm) ────────────────────────── */
  --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-15: 60px; --space-20: 80px;          /* --space-15 — вертикальный ритм секции */

  /* ── Радиусы ─────────────────────────────────── */
  --radius-sm:   12px;
  --radius-card: 28px;   /* крупные карточки/панели (фирменная «okta»-скруглённость) */
  --radius-pill: 100px;  /* кнопки-пилюли, чипы */

  /* ── Тени ────────────────────────────────────── */
  --shadow-card: 0 8px 40px rgba(0, 0, 0, .06);
  --shadow-nav:  0 1px 40px rgba(0, 0, 0, .05);

  /* ── Раскладка ───────────────────────────────── */
  --container:      1200px;  /* основная ширина контента */
  --container-wide: 1440px;  /* широкие блоки (сравнения, кейсы) */

  /* ── Брейкпоинты (как на всём сайте) ──────────── */
  /* 479px · 767px · 991px · 1440px. Проверять на 1280 / 768 / 375. */
  --bp-mobile:  479px;
  --bp-tablet:  767px;
  --bp-laptop:  991px;
  --bp-wide:    1440px;
}