/* ==========================================================
   VARIABLES.CSS
   Переменные проекта
   ========================================================== */

:root{

    /* Цветовая палитра */

    --color-primary:#2563eb;
    --color-primary-hover:#1d4ed8;

    --color-secondary:#0f172a;

    --color-success:#16a34a;
    --color-warning:#f59e0b;
    --color-danger:#dc2626;

    --color-white:#ffffff;

    --color-background:#f8fafc;

    --color-surface:#ffffff;

    --color-border:#e2e8f0;

    --color-text:#1e293b;

    --color-text-light:#64748b;

    --color-muted:#94a3b8;



    /* Градиенты */

    --gradient-primary:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );



    /* Типографика */

    --font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    --font-size-xs:.75rem;
    --font-size-sm:.875rem;
    --font-size-base:1rem;
    --font-size-lg:1.125rem;
    --font-size-xl:1.25rem;
    --font-size-2xl:1.75rem;
    --font-size-3xl:2.25rem;
    --font-size-4xl:3rem;

    --line-height:1.65;



    /* Толщина шрифта */

    --font-light:300;
    --font-normal:400;
    --font-medium:500;
    --font-semibold:600;
    --font-bold:700;



    /* Контейнер */

    --container-width:1200px;

    --container-padding:20px;



    /* Отступы */

    --space-1:4px;
    --space-2:8px;
    --space-3:12px;
    --space-4:16px;
    --space-5:20px;
    --space-6:24px;
    --space-8:32px;
    --space-10:40px;
    --space-12:48px;
    --space-16:64px;
    --space-20:80px;
    --space-24:96px;



    /* Радиусы */

    --radius-sm:6px;
    --radius-md:10px;
    --radius-lg:16px;
    --radius-xl:24px;
    --radius-round:999px;



    /* Тени */

    --shadow-sm:
        0 2px 6px rgba(0,0,0,.05);

    --shadow-md:
        0 8px 24px rgba(15,23,42,.08);

    --shadow-lg:
        0 20px 40px rgba(15,23,42,.12);



    /* Кнопки */

    --button-height:52px;



    /* Поля формы */

    --input-height:52px;



    /* Шапка */

    --header-height:80px;



    /* Анимации */

    --transition-fast:.2s ease;

    --transition:
        .3s ease;

    --transition-slow:
        .5s ease;



    /* Z-index */

    --z-header:1000;

    --z-menu:1100;

    --z-modal:2000;



    /* Брейкпоинты
       (используются как комментарии,
       CSS-переменные нельзя применять
       внутри media query)
    */

    --bp-xl:1200px;

    --bp-lg:992px;

    --bp-md:768px;

    --bp-sm:576px;

}