/* =====================================================
   tokens.css — Полная система дизайн-токенов
   ВерниВещь v0.2

   Импортирует brand-tokens.css (источник цветов).
   Добавляет типографику, отступы, радиусы, z-index.
   ===================================================== */

@import url('brand-tokens.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Typography ── */
  --font-main: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-hero:    clamp(44px, 7vw, 96px);
  --text-display: clamp(36px, 5.5vw, 72px);
  --text-h1:      clamp(32px, 4.5vw, 56px);
  --text-h2:      clamp(26px, 3.5vw, 44px);
  --text-h3:      clamp(20px, 2.5vw, 30px);
  --text-xl:      22px;
  --text-lg:      18px;
  --text-md:      16px;
  --text-sm:      14px;
  --text-xs:      12px;

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

  --lh-tight:   0.92;
  --lh-heading: 1.06;
  --lh-body:    1.58;
  --lh-relaxed: 1.72;

  --ls-tight:   -0.03em;
  --ls-heading: -0.02em;
  --ls-body:     0;

  /* ── Spacing (4px grid) ── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ── Border radius ── */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-3xl: 40px;
  --radius-pill: 999px;

  /* ── Z-index ── */
  --z-base:    1;
  --z-raised:  10;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-modal:   500;
  --z-toast:   800;
  --z-top:    1000;

  /* ── Layout ── */
  /* --content-width не используется как ограничение сетки.
     Сетка — всегда полная ширина экрана с side padding.
     Только --content-narrow для страниц с читабельным текстом. */
  --content-narrow: 720px;
  --section-px: clamp(24px, 5vw, 80px);
  --section-py: clamp(64px, 8vw, 120px);

  /* ── Components ── */
  --btn-h-sm: 40px;
  --btn-h-md: 48px;
  --btn-h-lg: 56px;
  --btn-h-hero: 60px;

  --input-h: 52px;
  --input-radius: var(--radius-md);

  --header-h: 72px;

  /* ── Shadows (only navy/red alpha) ── */
  --shadow-xs:   0 2px 8px rgba(1, 38, 67, 0.08);
  --shadow-sm:   0 4px 16px rgba(1, 38, 67, 0.10);
  --shadow-soft: 0 8px 32px rgba(1, 38, 67, 0.10);
  --shadow-card: 0 16px 56px rgba(1, 38, 67, 0.12);
  --shadow-deep: 0 24px 80px rgba(1, 38, 67, 0.16);
  --shadow-red:  0 8px 32px rgba(229, 53, 8, 0.22);
  --shadow-red-lg: 0 16px 48px rgba(229, 53, 8, 0.28);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.64);

  /* ── Transitions ── */
  --trans-fast:   160ms cubic-bezier(0.16, 1, 0.3, 1);
  --trans-base:   260ms cubic-bezier(0.16, 1, 0.3, 1);
  --trans-medium: 420ms cubic-bezier(0.16, 1, 0.3, 1);
}