/**
 * Design tokens – Praktika Synergy (astra-child)
 *
 * Breakpoints (2 layout + header):
 *   base .............. mobile-first от 320px (без media)
 *   --bp-desktop ...... 922px  layout (grids, hero split)
 *   --bp-header ....... 1024px header/nav only
 *
 * Content max-width: --container-max (1200px). Viewport 1440 ≠ breakpoint.
 * См. AGENTS.md + COMPONENTS.md
 */

:root {
    /* ===== BREAKPOINTS (документация; в @media CSS variables не работают) ===== */
    --bp-desktop: 922px;
    --bp-header: 1024px;

    /* ===== CONTENT GRID (единая сетка всего сайта) =====
     * Все: header, hero, секции, footer – max-width + одинаковый gutter.
     * --ast-normal-container-width: алиас, чтобы Astra/старый CSS совпадал.
     */
    --container-max: 1200px;
    --container-pad-x: 16px;
    --ast-normal-container-width: var(--container-max);

    /* ===== ЦВЕТА ===== */
    --color-primary: #2563eb;
    --color-primary-light: #3b82f6;
    --color-primary-dark: #1d4ed8;
    --color-primary-bg: #eff6ff;

    --color-success: #10b981;
    --color-success-light: #34d399;
    --color-success-dark: #059669;
    --color-success-bg: #ecfdf5;

    --color-white: #ffffff;
    --color-bg-light: #f8fafc;
    --color-bg-section: #f1f5f9;
    --color-bg-gray: #f1f5f9;

    --color-text-dark: #1e293b;
    --color-text-body: #475569;
    /* Приглушённый текст: ≥4.5:1 на белом при обычном кегле */
    --color-text-muted: #64748b;

    --color-border: #e2e8f0;
    --color-border-hover: #cbd5e1;

    /* Telegram brand (кнопки) */
    --color-telegram: #0088cc;
    --color-telegram-hover: #006da3;

    /* ===== ТЕНИ ===== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
    --shadow-primary: 0 4px 14px rgba(37, 99, 235, 0.35);
    --shadow-success: 0 4px 14px rgba(16, 185, 129, 0.35);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.1);

    /* ===== СКРУГЛЕНИЯ ===== */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ===== ТИПОГРАФИКА (mobile-first base ≥320) ===== */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --fs-h1: 1.625rem;       /* ~26px */
    --fs-h2: 1.375rem;       /* section titles ~22px */
    --fs-h3: 1.125rem;       /* card titles */
    --fs-lead: 1.0625rem;    /* tagline / lead */
    --fs-body: 0.9375rem;    /* ~15px body */
    --fs-sm: 0.8125rem;      /* meta, trust */
    --fs-xs: 0.75rem;        /* badges, breadcrumbs */
    --fs-badge: 0.625rem;    /* uppercase pills */

    --lh-tight: 1.2;
    --lh-snug: 1.35;
    --lh-body: 1.55;

    /* ===== ОТСТУПЫ (mobile-first – плотнее) ===== */
    --spacing-section: 40px;
    --spacing-section-x: 16px;
    --spacing-hero-top: 20px;
    --spacing-hero-bottom: 48px;
    --spacing-breadcrumb-gap: 14px;
    --spacing-card: 16px;
    --spacing-stack: 12px;
    --spacing-gap: 16px;

    /* ===== КНОПКИ ===== */
    --btn-pad-y: 12px;
    --btn-pad-x: 22px;
    --btn-fs: 0.9375rem;
    --btn-radius: var(--radius-md);
    --btn-radius-pill: var(--radius-full);

    /* ===== ГРАДИЕНТЫ ===== */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    --gradient-primary-hover: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    --gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-light) 100%);
    --gradient-success-hover: linear-gradient(135deg, var(--color-success-dark) 0%, var(--color-success) 100%);
    --gradient-hero: linear-gradient(135deg, #f0f7ff 0%, #ffffff 30%, #f8faff 70%, #e8f4ff 100%);
    --gradient-cta: linear-gradient(135deg, #1e3a5f 0%, var(--color-primary) 100%);
}

/* Desktop layout ≥922px – type/spacing (density scale, см. COMPONENTS.md §3) */
@media (min-width: 922px) {
    :root {
        --container-pad-x: 20px;

        /* Было слишком крупно (H1 до 3.25rem, lead 1.5rem) – hero и секции «раздувались» */
        --fs-h1: clamp(1.85rem, 2.6vw, 2.4rem);
        --fs-h2: 1.625rem;
        --fs-h3: 1.125rem;
        --fs-lead: 1.125rem;
        --fs-body: 1rem;
        --fs-sm: 0.875rem;
        --fs-xs: 0.8125rem;
        --fs-badge: 0.75rem;

        --spacing-section: 52px;
        --spacing-section-x: 20px;
        --spacing-hero-top: 24px;
        --spacing-hero-bottom: 56px;
        --spacing-breadcrumb-gap: 12px;
        --spacing-card: 20px;
        --spacing-stack: 12px;
        --spacing-gap: 20px;

        --btn-pad-y: 12px;
        --btn-pad-x: 24px;
        --btn-fs: 0.9375rem;
    }
}