/* ============================================================================
   Design tokens — единый источник истины для цвета, типографики и отступов.
   Единая брендовая палитра (индиго → фиолетовый → циан) и модульные шкалы.
   Правило: значение живёт здесь; поменяв его тут, меняешь во всём проекте.
   Порядок каскадных слоёв объявлен один раз — им управляется приоритет стилей.
   ============================================================================ */
@layer tokens, base, components, landing, legal, utilities;

@layer tokens {
  :root {
    /* --- Бренд-палитра -------------------------------------------------- */
    --primary: #4f46e5;          /* индиго-600 — основной */
    --primary-2: #9333ea;        /* фиолетовый-600 */
    --accent: #06b6d4;           /* циан-500 — акцент */

    /* --- Мессенджеры (семантические, не декоративные цвета) ------------- */
    --tg: #229ed9;               /* фирменный цвет Telegram */
    --wa: #25d366;               /* фирменный цвет WhatsApp */

    /* --- Поверхности и текст ------------------------------------------- */
    --bg: #f3f4fa;               /* фон страницы — светлый, не белый */
    --bg-alt: #f6f7ff;           /* чередующийся фон секции */
    --surface: #ffffff;          /* карточки и панели */
    --ink: #0b0f1a;              /* основной текст */
    --ink-soft: #283042;         /* текст внутри карточек и списков */
    --muted: #5a6678;            /* второстепенный текст */
    --on-dark: #e9ecff;          /* текст на тёмных секциях */
    --on-dark-muted: #a6adcf;

    /* --- Линии и заливки ----------------------------------------------- */
    --hairline: rgba(79, 70, 229, .16);
    --brand-tint: rgba(79, 70, 229, .09);   /* мягкая индиго-заливка: бейджи, иконки */
    --border-card: rgba(79, 70, 229, .12);
    --border-card-hover: rgba(79, 70, 229, .24);

    /* --- Градиенты ------------------------------------------------------ */
    --gradient-brand: linear-gradient(135deg, var(--primary), var(--accent));
    --gradient-brand-2: linear-gradient(135deg, var(--primary), var(--primary-2));
    --gradient-brand-3: linear-gradient(135deg, var(--primary-2), var(--accent));
    --gradient-dark: linear-gradient(180deg, #0d1226 0%, #131a34 100%);

    /* --- Радиусы -------------------------------------------------------- */
    --radius-control: 12px;      /* кнопки, поля */
    --radius-card: 18px;         /* карточки, панели */
    --radius-pill: 999px;        /* чипы, бейджи */

    /* --- Тени ----------------------------------------------------------- */
    --shadow-card: 0 4px 18px rgba(28, 20, 90, .05);
    --shadow-card-hover: 0 14px 34px rgba(28, 20, 90, .12);
    --shadow-icon: 0 6px 14px rgba(79, 70, 229, .28);
    --shadow-icon-2: 0 6px 14px rgba(147, 51, 234, .28);
    --shadow-icon-3: 0 6px 14px rgba(6, 182, 212, .26);

    /* --- Семантика: «что входит» / «уходит рутина» --------------------- */
    --color-success: #16a34a;
    --color-success-tint: rgba(22, 163, 74, .12);
    --color-warning: #b08900;
    --color-warning-tint: rgba(176, 137, 0, .14);

    /* --- Шкала отступов (базовый шаг 4px) ------------------------------ */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-section: clamp(48px, 6vw, 96px);  /* вертикальный ритм секций */

    /* --- Типографическая шкала (модульная, лендинг: высокий контраст) -- */
    --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: Outfit, Inter, sans-serif;
    --fs-100: 12px;
    --fs-200: 13px;
    --fs-300: 14px;
    --fs-400: 16px;                           /* базовый текст */
    --fs-500: clamp(17px, 1.4vw, 19px);       /* лид-абзац */
    --fs-600: clamp(19px, 1.7vw, 23px);       /* h3 */
    --fs-700: clamp(23px, 2.6vw, 30px);       /* крупный акцент */
    --fs-800: clamp(27px, 3.6vw, 42px);       /* h2 */
    --fs-900: clamp(34px, 5vw, 62px);         /* h1 hero */

    /* --- Прочее -------------------------------------------------------- */
    --container: 1180px;
    --nav-height: 64px;
    --ease: cubic-bezier(.22, .61, .36, 1);
  }
}