/* ========================================================================
   tokens.css — дизайн-токены (:root) — вынесено из style.css при сборке UI kit
   ======================================================================== */

/* ========================================================================
 *  Лаборатория Клубок — дизайн-система v2
 *  Палитра: фиолетово-лавандовая, мягкая. Серифные акценты в заголовках.
 *  Структура файла:
 *    1. Дизайн-токены (цвета, шрифты, тени, радиусы)
 *    2. Reset + базовая типографика
 *    3. Layout (контейнер, секции, утилиты)
 *    4. Шапка / подвал
 *    5. Кнопки, ссылки
 *    6. Формы
 *    7. Бейджи, чипы, теги, мета-строка
 *    8. Карточки (контентные)
 *    9. Hero-блок
 *   10. Шаги (1-2-3-4 индикатор)
 *   11. Преимущества (фичи)
 *   12. Игровые карты МАК (рубашки, веер, флип, открытая)
 *   13. Модалка просмотра карты
 *   14. Анимации
 *   15. Главная страница
 *   16. Каталог техник + страница техники
 *   17. Галерея + страница колоды
 *   18. Колесо баланса + страница сферы
 *   19. О нас / Магазин / Юр. страницы
 *   20. Утилиты
 *   21. Респонсив (медиа)
 * ======================================================================== */


/* === 1. Дизайн-токены ================================================== */
:root {
    /* Palette */
    --color-primary: #7C3AED;
    --color-primary-dark: #6D28D9;
    --color-primary-light: #A78BFA;
    --color-primary-soft: #DDD6FE;
    --color-primary-bg: #EDE9FE;

    --color-accent: #EC4899;
    --color-accent-soft: #FBCFE8;

    --color-bg: #FAF7FF;
    --color-bg-section: #F5F3FF;
    --color-bg-soft: #F3E8FF;
    --color-bg-card: #FFFFFF;

    --color-text: #1F1B2E;
    --color-text-muted: #6B7280;
    --color-text-light: #9CA3AF;
    --color-text-on-dark: #E0E7FF;
    --color-text-on-primary: #FFFFFF;

    --color-footer-bg: #2A1B47;
    --color-footer-text: #C4B5FD;
    --color-footer-heading: #DDD6FE;

    --color-border: #E5E7EB;
    --color-border-light: #F3F4F6;
    --color-border-purple: #DDD6FE;

    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;

    /* Typography */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

    --fs-xs: 0.75rem;     /* 12 */
    --fs-sm: 0.875rem;    /* 14 */
    --fs-base: 1rem;      /* 16 */
    --fs-md: 1.125rem;    /* 18 */
    --fs-lg: 1.25rem;     /* 20 */
    --fs-xl: 1.5rem;      /* 24 */
    --fs-2xl: 1.875rem;   /* 30 */
    --fs-3xl: 2.25rem;    /* 36 */
    --fs-4xl: 3rem;       /* 48 */

    --lh-tight: 1.2;
    --lh-snug: 1.35;
    --lh-normal: 1.55;
    --lh-relaxed: 1.7;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* Radius */
    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(31, 27, 46, 0.04);
    --shadow-sm: 0 2px 4px rgba(31, 27, 46, 0.06);
    --shadow-md: 0 4px 12px rgba(124, 58, 237, 0.08);
    --shadow-lg: 0 10px 24px rgba(124, 58, 237, 0.12);
    --shadow-xl: 0 20px 40px rgba(124, 58, 237, 0.18);
    --shadow-purple: 0 6px 20px rgba(124, 58, 237, 0.25);

    /* Transitions */
    --t-fast: 0.15s ease;
    --t: 0.25s ease;
    --t-slow: 0.4s ease;

    /* Layers */
    --z-header: 100;
    --z-modal: 1000;
    --z-toast: 2000;

    /* Container */
    --container-max: 1480px;
    --container-pad: 32px;
}