/* Resquad — токены. Единственное место, где живут литералы.
   Три уровня: global (примитив) → semantic (роль) → component.
   Источник значений — Figma RE-Squad-Ai (UI Kit + утверждённые промо), разбор в brand/BRAND.md.
   Таблицы ролей — DESIGN-SYSTEM.md §1–2. Меняешь токен — меняешь таблицу. */

:root {
  /* ---------- global: цвет ---------- */
  --g-black: #000E09;        /* Figma: Black */
  --g-green-black: #16221E;  /* Figma: Green Black — основной тёмный фон промо */
  --g-green-ink: #253C34;    /* промо: чипы на тёмном */
  --g-neon: #00FF5E;         /* промо: «one prompt», Vision 2030, TRY IT */
  --g-green-500: #22C55E;    /* Figma: Green Light */
  --g-green-dark: #075D2B;   /* Figma: Green Dark — логотип на светлом */
  --g-mint: #CFF9DD;         /* промо: панель «The new way» */
  --g-grey-100: #EAEEF2;     /* промо: плитки цифр */
  --g-grey-400: #929292;     /* Figma: Grey 1 */
  --g-white: #FFFFFF;
  --g-smoke: #0C0C0C;        /* промо: стекло карточек разработчика */
  --g-orange-700: #C2410C;   /* «old way» на светлом — сайт отличает цветом, в Figma чёрный */
  --g-orange-400: #FB923C;   /* «old way» на тёмном */

  /* ---------- global: шрифт ---------- */
  --g-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --g-font-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", var(--g-font);

  /* ---------- шкала кегля (закрытый набор, §2) ---------- */
  --fs-display: clamp(44px, 7.2vw, 104px); /* только hero H1 */
  --fs-h1: clamp(36px, 4.6vw, 64px);       /* заголовок секции */
  --fs-h2: clamp(28px, 3vw, 40px);         /* подзаголовок, большая цифра */
  --fs-h3: 24px;                           /* заголовок карточки */
  --fs-lead: 20px;                         /* лид под заголовком */
  --fs-body: 16px;                         /* всё, что читают */
  --fs-small: 14px;                        /* подписи, мета */
  --fs-micro: 12px;                        /* КАПС-лейблы, чипы */

  --lh-tight: 0.9;   /* display, как в one-pager */
  --lh-head: 1.1;
  --lh-body: 1.5;

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

  --ls-display: -0.03em;
  --ls-head: -0.02em;
  --ls-caps: 0.08em;

  /* ---------- отступы: сетка 4/8 ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 144px;
  --section-y: clamp(var(--sp-8), 9vw, var(--sp-10));
  --gutter: max(16px, 4vw);
  --container: 1280px;

  /* ---------- радиусы по вложенности ---------- */
  --r-xl: 24px; --r-lg: 16px; --r-md: 12px; --r-sm: 8px; --r-pill: 999px;

  /* ---------- высоты контролов: две ---------- */
  --h-ctl: 52px;
  --h-ctl-sm: 40px;

  /* ---------- движение ---------- */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 140ms;
  --t-base: 260ms;

  /* ---------- semantic: по умолчанию светлая секция ---------- */
  --bg: var(--g-white);
  --surface: var(--g-grey-100);
  --surface-accent: var(--g-mint);
  --text: var(--g-black);
  --text-muted: color-mix(in srgb, var(--g-black) 60%, transparent);
  --line: color-mix(in srgb, var(--g-black) 15%, transparent);
  --accent: var(--g-green-dark);       /* акцент-текст на светлом: неон здесь нечитаем */
  --accent-fill: var(--g-neon);        /* заливка акцента, текст на ней — --on-accent */
  --on-accent: var(--g-black);
  --positive: var(--g-green-dark);
  --negative: var(--g-orange-700);
  --focus: var(--g-green-dark);
  --glass-bg: color-mix(in srgb, var(--g-white) 70%, transparent);
  --glass-line: color-mix(in srgb, var(--g-black) 12%, transparent);

}

/* ---------- component ----------
   Отдельным правилом на :root и на каждом контексте секции: var() в custom property
   вычисляется там, где объявлен, поэтому без повтора в .on-dark/.on-mint компонент
   унаследовал бы значения светлой секции (чёрный текст чипа на тёмном).
   Стоит ДО .on-dark/.on-mint: их явные переопределения (--chip-bg, --prompt-bg) побеждают. */
:root, .on-dark, .on-mint {
  --btn-primary-bg: var(--accent-fill);
  --btn-primary-fg: var(--on-accent);
  --btn-secondary-fg: var(--text);
  --btn-secondary-line: var(--line);
  --chip-bg: var(--surface);
  --chip-fg: var(--text);
  --prompt-bg: var(--g-white);
  --prompt-line: var(--line);
  --stat-bg: var(--surface);
}

/* Тёмная секция (hero, CTA, «как это работает»). Не тема сайта, а контекст секции. */
.on-dark {
  --bg: var(--g-green-black);
  --surface: color-mix(in srgb, var(--g-white) 6%, var(--g-green-black));
  --surface-accent: var(--g-green-ink);
  --text: var(--g-white);
  --text-muted: color-mix(in srgb, var(--g-white) 60%, transparent);
  --line: color-mix(in srgb, var(--g-white) 14%, transparent);
  --accent: var(--g-neon);
  --positive: var(--g-neon);
  --negative: var(--g-orange-400);
  --focus: var(--g-neon);
  --glass-bg: color-mix(in srgb, var(--g-smoke) 50%, transparent);
  --glass-line: color-mix(in srgb, var(--g-white) 40%, transparent);
  --chip-bg: var(--g-green-ink);
  --prompt-bg: color-mix(in srgb, var(--g-green-black) 20%, transparent);
  --prompt-line: color-mix(in srgb, var(--g-white) 48%, transparent);
  --stat-bg: var(--surface);
  background: var(--bg);
  color: var(--text);
}

/* Мятная панель («The new way»). */
.on-mint {
  --bg: var(--g-mint);
  --surface: color-mix(in srgb, var(--g-white) 55%, var(--g-mint));
  --line: color-mix(in srgb, var(--g-black) 15%, transparent);
  background: var(--bg);
  color: var(--text);
}