/* =====================================================================
   WONDERSCRIBE DESIGN TOKENS — Single source of truth (2026-05-25)

   Все размеры, отступы, цвета, тени, радиусы, z-index и motion для
   public-страниц централизованы здесь. Каждый компонент / partial /
   override-CSS ОБЯЗАН использовать только эти `var(--token)` — никаких
   magic-numbers.

   Подключается в base.html ДО components.css, чтобы переменные были
   доступны всем последующим стилям. Public-pages-unified.css и любые
   inline <style> в partials используют var(--token) отсюда.

   Эталон — главная (https://wonderscribe.pro/). Все scales выведены
   из измеренных значений главной + standard 4/8 spacing system.

   Когда добавлять новый токен:
     1. Используется в ≥2 местах
     2. Логически принадлежит к одной из шкал (size/spacing/color/...)
     3. Не дублирует существующий

   Когда НЕ добавлять:
     - Одноразовое значение → inline-style оправдан
     - Component-specific tweak → определить в samom partial
===================================================================== */

:root {
  /* ─── Typography scale ─────────────────────────────────────────── */
  /* Базовая шкала: mobile-first, переопределяется на @768 и @1024 */
  --fs-h1: 32px;        /* hero на mobile */
  --fs-h2: 24px;
  --fs-h3: 20px;
  --fs-h4: 17px;
  --fs-h5: 15px;
  --fs-h6: 13px;
  --fs-lead: 17px;      /* подзаголовок hero / введение секции */
  --fs-body: 16px;      /* основной текст */
  --fs-small: 14px;     /* meta / captions */
  --fs-tiny: 12px;      /* eyebrow / labels */
  --fs-code: 12px;      /* mono labels (wsd-pr-feat-mono и т.п.) */

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

  --lh-tight: 1.08;     /* h1 */
  --lh-snug: 1.15;      /* h2/h3 */
  --lh-normal: 1.45;    /* lead */
  --lh-relaxed: 1.55;   /* body */
  --lh-loose: 1.65;     /* article body */

  --tracking-tight: -.025em;   /* hero typography */
  --tracking-snug: -.02em;     /* h2/h3 */
  --tracking-normal: 0;
  --tracking-wide: .05em;      /* eyebrows / labels uppercase */

  --font-display: "Bricolage Grotesque", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* ─── Spacing scale (4/8 base) ─────────────────────────────────── */
  --space-0: 0;
  --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;

  /* ─── Container ───────────────────────────────────────────────── */
  --container-max: 88rem;            /* 1408px */
  --container-pad-mobile: var(--space-4);    /* 16 */
  --container-pad-tablet: var(--space-8);    /* 32 */
  --container-pad-desktop: var(--space-12);  /* 48 */

  /* ─── Section vertical rhythm ──────────────────────────────────── */
  --section-pad-mobile: var(--space-12);     /* 48 */
  --section-pad-tablet: var(--space-16);     /* 64 */
  --section-pad-desktop: var(--space-20);    /* 80 */
  --section-pad-compact-desktop: var(--space-16);  /* 64 — для compact sections */
  --section-gap: var(--space-6);             /* пробел между блоками внутри section */

  /* ─── Border radius ────────────────────────────────────────────── */
  --r-none: 0;
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-3xl: 32px;
  --r-full: 9999px;

  /* ─── Shadows ──────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 8px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 24px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.04);
  --shadow-xl: 0 20px 40px rgba(0,0,0,.10), 0 8px 16px rgba(0,0,0,.06);
  --shadow-2xl: 0 32px 64px rgba(0,0,0,.14), 0 16px 32px rgba(0,0,0,.08);

  --shadow-card: var(--shadow-sm);
  --shadow-card-hover: var(--shadow-lg);
  --shadow-popular: 0 14px 40px -10px rgba(16,185,129,.32), 0 4px 12px rgba(0,0,0,.06);

  /* ─── Z-index scale ────────────────────────────────────────────── */
  /* Канонические уровни. Не использовать произвольные z-index. */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 50;
  --z-fixed: 60;
  --z-header: 100;
  --z-cookie: 110;
  --z-modal-backdrop: 200;
  --z-modal: 210;
  --z-popover: 220;
  --z-tooltip: 240;
  --z-toast: 250;

  /* ─── Motion ──────────────────────────────────────────────────── */
  --motion-fast: 150ms;
  --motion-base: 220ms;
  --motion-slow: 320ms;
  --motion-slower: 480ms;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ─── Brand colors (single source) ─────────────────────────────── */
  --color-brand: #FFD60A;            /* primary yellow */
  --color-brand-hover: #F5C800;
  --color-brand-active: #E5BC00;

  --color-emerald: #10b981;          /* secondary (popular plan, success) */
  --color-emerald-dark: #059669;
  --color-violet: #7c3aed;           /* tertiary (PAYG plan) */
  --color-violet-light: #a78bfa;     /* same on dark */

  /* Note: --color-text, --color-bg, --color-text-muted и т.п. уже
     определены в components.css :root для совместимости с обоими
     темами (light/dark через @media + .dark class). Не дублируем. */
}

/* ──────────────────────────────────────────────────────────────────
   Tablet+ overrides (≥768)
──────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  :root {
    --fs-h1: 44px;
    --fs-h2: 30px;
    --fs-h3: 22px;
    --fs-h4: 18px;
    --fs-lead: 18px;
    --fs-body: 16px;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Desktop+ overrides (≥1024) — эталон главной
──────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  :root {
    --fs-h1: 60px;
    --fs-h2: 36px;
    --fs-h3: 24px;
    --fs-h4: 18px;
    --fs-lead: 19px;
    --fs-body: 16px;
  }
}