:root {
    /* ============================================================
       Кольорова палітра — насичений темно-синій + блакитний акцент
       ============================================================ */
    --color-primary:        #0A1628; /* основний темний (текст, фон) */
    --color-primary-hover:  #060E1C;
    --color-accent:         #2563EB; /* акцентний синій */
    --color-accent-hover:   #1D4ED8;
    --color-accent-glow:    rgba(37, 99, 235, 0.35);
    --color-success:        #22C55E;
    --color-error:          #EF4444;
    --color-white:          #FFFFFF;
    --color-bg:             #EEF5FF; /* світло-блакитний фон секцій */
    --color-bg-alt:         #F8FAFF;
    --color-text:           #1E293B;
    --color-text-muted:     #64748B;
    --color-border:         #DBEAFE;
    --color-overlay:        rgba(10, 22, 40, 0.75);

    /* Градієнт фону hero */
    --hero-bg-1:            #060F22;
    --hero-bg-2:            #0A1E48;
    --hero-bg-3:            #1248A0;
    --hero-bg-4:            #1E72D8;

    /* Зерниста SVG-фактура для темних градієнтів (повторювана плитка без окремого файлу) */
    --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='0.4'/%3E%3C/svg%3E");

    /* Скло / frosted glass */
    --glass-bg:             rgba(255, 255, 255, 0.08);
    --glass-bg-hover:       rgba(255, 255, 255, 0.13);
    --glass-border:         rgba(255, 255, 255, 0.15);
    --glass-blur:           blur(24px);

    /* ============================================================
       Типографіка
       ============================================================ */
    --font-body:    'Google Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-heading: 'Druk Wide Cyr', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Розміри шрифту */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;

    /* Насиченість */
    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-heavy:    800;
    --fw-black:    900;

    /* Міжрядковий інтервал */
    --lh-tight:  1.15;
    --lh-snug:   1.35;
    --lh-normal: 1.6;
    --lh-loose:  1.8;

    /* ============================================================
       Відступи (система кратна 0.25rem)
       ============================================================ */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;

    /* ============================================================
       Лейаут
       ============================================================ */
    --container-max: 1240px;
    --container-pad: 1.5rem;
    --section-py:    5rem;

    /* ============================================================
       Радіуси заокруглення
       ============================================================ */
    --radius-sm:   4px;
    --radius-md:   10px;
    --radius-lg:   18px;
    --radius-xl:   26px;
    --radius-pill: 9999px; /* повне заокруглення (pill / капсула) */

    /* ============================================================
       Тіні
       ============================================================ */
    --shadow-xs:   0 1px 4px rgba(10, 22, 40, .06);
    --shadow-sm:   0 2px 8px rgba(10, 22, 40, .08);
    --shadow-md:   0 6px 24px rgba(10, 22, 40, .12);
    --shadow-lg:   0 16px 48px rgba(10, 22, 40, .16);
    --shadow-xl:   0 24px 72px rgba(10, 22, 40, .22);
    --shadow-glow: 0 8px 32px rgba(37, 99, 235, .30);

    /* ============================================================
       Анімації
       ============================================================ */
    --t-fast:   150ms ease;
    --t-normal: 250ms ease;
    --t-slow:   400ms ease;

    /* ============================================================
       Z-index шари
       ============================================================ */
    --z-base:     1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  500;
    --z-modal:    600;
    --z-toast:    700;

    /* ============================================================
       Хедер
       ============================================================ */
    --header-h: 68px;
}