/* =============================================================================
 * GroomPro Design Tokens v2 — single source of truth for main test2 landing.
 *
 * Подключение: <link rel="stylesheet" href="/static/css/tokens.css?v=20260715-2">
 * строго ПЕРЕД /static/css/landing.css.
 *
 * Скоуп: только главная test2.groomersite.ru.
 * Мини-сайты (gen1/<city>/assets/style.css × 89) используют собственный :root
 * с такой же архитектурой (--color-* + oklch + шкалы), но НЕ импортируют этот
 * файл (каждый город автономен, чтобы CDN мог закэшировать).
 *
 * Философия v2 (15.07.2026 ~12:00 UTC):
 *  - Палитра: oklch() вместо hex (perceptual uniformity + hue-based тематизация).
 *  - Hue 162.5 = GroomPro emerald. Поменять hue → вся палитра перекрасится.
 *  - Семантические токены: --color-* (primary/accent/text/bg/border/state).
 *  - Шкалы: --space-*, --radius-*, --shadow-*, --text-* (вместо имён ролей).
 *  - Полная типографическая шкала с clamp() (xs..4xl + lh-tight/snug/body).
 *  - Pill-радиусы сохранены как специальные (btn=48px, toast=60px, sm=28px) —
 *    чтобы визуально не отличаться от v1 пиксель-в-пиксель.
 *
 * Эволюция: 60 vars v1 → 71 var v2 (больше семантики, шкалы, типографика).
 * ============================================================================= */

:root {
    /* =========================================================================
     * 1. PRIMARY PALETTE (hue 162.5 = GroomPro emerald, 5 уровней)
     * ===================================================================== */

    --color-primary: oklch(69.6% 0.149 162.5);            /* = #10B981 perceptually */
    --color-primary-light: oklch(78% 0.105 162);          /* = #34D399 lighter */
    --color-primary-dark: oklch(59.6% 0.127 163);        /* = #059669 darker (hover) */
    --color-primary-surface: oklch(97.9% 0.021 166);      /* = #ECFDF5 soft фон */
    --color-primary-surface-strong: oklch(94.5% 0.04 164);/* = #D1FAE5 divider */

    /* =========================================================================
     * 2. ACCENT (синоним primary, для hover/focus состояний)
     * ===================================================================== */

    --color-accent: oklch(69.6% 0.149 162.5);
    --color-accent-dark: oklch(59.6% 0.127 163);
    --color-accent-surface: oklch(97.9% 0.021 166);

    /* =========================================================================
     * 3. NEUTRAL TEXT (5 уровней + dark-muted для footer)
     * ===================================================================== */

    --color-text: oklch(22% 0.02 162);                  /* = #1F2A3A body */
    --color-text-strong: oklch(15% 0.02 162);           /* = #0F1722 hover */
    --color-text-secondary: oklch(38% 0.02 162);        /* = #4A5B6E labels */
    --color-text-muted: oklch(50% 0.015 162);           /* = #5A6E84 subtitle */
    --color-text-nav: oklch(28% 0.02 162);              /* = #2C3E50 nav */
    --color-text-on-primary: oklch(98% 0.005 162);      /* = #FFFFFF на emerald */
    --color-text-on-dark-muted: oklch(78% 0.015 240);   /* = #C9D3E0 footer */

    /* Акцентный блок (mini-sites video-placeholder и подобные тёмные секции) */
    --color-accent-block: oklch(25% 0.06 162);

    /* =========================================================================
     * 4. SURFACES, BACKGROUNDS, BORDERS
     * ===================================================================== */

    --color-bg: oklch(100% 0 0);                        /* = #FFFFFF */
    --color-surface: oklch(99.5% 0.005 162);            /* = #FAFCFE card */
    --color-surface-soft: oklch(97.5% 0.008 162);       /* = #F8FAFE region-link */
    --color-surface-shimmer: oklch(96% 0.01 162);       /* = #F0F2F5 border-faint */
    --color-header-bg: oklch(98% 0.005 162 / 0.96);     /* = rgba(255,255,255,0.96) backdrop-blur */

    --color-border: oklch(88% 0.015 162);               /* = #E2E8F0 input */
    --color-border-light: oklch(93% 0.01 162);          /* = #F0F2F5 / #EDF2F7 / #EFF3F8 */
    --color-divider-footer: oklch(28% 0.04 240);        /* = #2D3A4A */

    /* =========================================================================
     * 5. SEMANTIC STATE COLORS (для будущих success/warning/error/info)
     * ===================================================================== */

    --color-success: oklch(60% 0.13 162);
    --color-success-surface: oklch(96% 0.025 162);
    --color-warning: oklch(75% 0.15 80);
    --color-warning-surface: oklch(96% 0.04 80);
    --color-error: oklch(55% 0.15 25);
    --color-error-surface: oklch(96% 0.02 25);
    --color-info: oklch(50% 0.1 230);
    --color-info-surface: oklch(96% 0.015 230);

    /* =========================================================================
     * 6. SHADOWS — стандартная шкала xs/sm/md/lg/xl + 2 emerald-accent
     * ===================================================================== */

    --shadow-xs: 0 1px 3px oklch(0% 0 0 / 0.06);
    --shadow-sm: 0 2px 8px oklch(0% 0 0 / 0.08);
    --shadow-md: 0 4px 16px oklch(0% 0 0 / 0.1);
    --shadow-lg: 0 8px 24px oklch(0% 0 0 / 0.12);
    --shadow-xl: 0 16px 30px oklch(0% 0 0 / 0.15);
    --shadow-accent: 0 4px 8px oklch(69.6% 0.149 162.5 / 0.25);
    --shadow-accent-lg: 0 6px 12px oklch(69.6% 0.149 162.5 / 0.35);

    /* =========================================================================
     * 7. RADII — стандартная шкала + специальные пилюли (для pixel-identity с v1)
     * ===================================================================== */

    --radius-sm: 6px;                                  /* мелкие элементы */
    --radius-md: 10px;                                 /* inputs, badges */
    --radius-lg: 14px;                                 /* cards */
    --radius-xl: 24px;                                 /* формы (было 32px) */
    --radius-2xl: 40px;                                /* крупные контейнеры (было 40px) */
    --radius-pill: 9999px;                             /* универсальный */

    /* Специальные (сохраняем визуальную идентичность с v1) */
    --radius-pill-btn: 48px;                           /* = --gp-radius-pill (кнопки) */
    --radius-pill-sm: 28px;                            /* = --gp-radius-pill-sm (inputs, advantage-card) */
    --radius-toast: 60px;                              /* = --gp-radius-toast */
    --radius-badge: 50px;                              /* = --gp-radius-badge */

    /* =========================================================================
     * 8. SPACING — стандартная шкала (4-pt grid)
     * ===================================================================== */

    --space-3xs: 4px;
    --space-2xs: 8px;
    --space-xs: 12px;                                  /* = --gp-btn-py-y */
    --space-sm: 16px;
    --space-md: 24px;                                  /* = --gp-grid-gap, --gp-container-px */
    --space-lg: 32px;                                  /* = --gp-form-py */
    --space-xl: 48px;                                  /* = --gp-stats-gap */
    --space-2xl: 56px;                                 /* = --gp-section-py-sm-y, footer-py-y */
    --space-3xl: 64px;
    --space-4xl: 80px;                                 /* = --gp-section-py */

    /* =========================================================================
     * 9. LAYOUT
     * ===================================================================== */

    --container-max: 1280px;                           /* = --gp-container-max */
    --container-narrow: 720px;                         /* = --gp-subtitle-max */
    --container-wide: 900px;                           /* = --gp-hero-h1-max */
    --z-header: 100;
    --z-toast: 1000;
    --z-modal: 1100;

    /* =========================================================================
     * 10. TYPOGRAPHY — полная шкала с clamp() (xs..4xl)
     * ===================================================================== */

    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    --text-xs: 0.8rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-xl: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
    --text-2xl: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
    --text-3xl: clamp(2rem, 1.3rem + 2.5vw, 3rem);
    --text-4xl: clamp(2.5rem, 1.5rem + 3vw, 3.5rem);

    --lh-tight: 1.15;
    --lh-snug: 1.35;
    --lh-body: 1.7;

    /* =========================================================================
     * 11. MOTION — стандартные transition durations + easings
     * ===================================================================== */

    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-card: 250ms ease;
    --transition-toast: opacity 300ms ease;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}