:root {
    /* =========================
       1. ЦВЕТОВАЯ ПАЛИТРА
       ========================= */
    --bg-main: #000000;
    --bg-surface: #111111;
    --color-accent: #FF4400;
    
    /* Цвета текста */
    --text-main: #f5f5f5;
    --text-muted: #e0e0e0;
    --text-muted-dark: #999999;
    --text-dark: #001621;

    /* Цвета ховеров */
    --hover-color-accent: #FF4103;
    --hover-color-text: #ffffff;
    --hover-opacity: 0.8;

    /* Обводки / Линии */
    --border-light: rgba(255, 255, 255, 0.1);

    /* --- GUTENBERG COLOR PRESETS --- */
--wp--preset--color--bg-main: var(--bg-main);
--wp--preset--color--bg-surface: var(--bg-surface);
--wp--preset--color--accent: var(--color-accent);
--wp--preset--color--text-main: var(--text-main);
--wp--preset--color--text-muted: var(--text-muted);
--wp--preset--color--text-muted-dark: var(--text-muted-dark);
--wp--preset--color--text-dark: var(--text-dark);

    /* =========================
       2. ТИПОГРАФИКА
       ========================= */
    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Oswald', sans-serif;

    /* Начертания (Толщина) */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* Размеры шрифтов */
    --fs-sm: 0.875rem;
    --fs-base: 1.125rem;
    --fs-md: 2rem;
    --fs-lg: 3rem;
    --fs-xl: 4rem;
    --fs-xxl: 6rem;

    /* --- TYPOGRAPHY CLAMPS --- */
    --fs-10: clamp(0.5625rem, 0.06vw + 0.55rem, 0.625rem);    /* 9px - 10px */
    --fs-11: clamp(0.5625rem, 0.13vw + 0.54rem, 0.6875rem);   /* 9px - 11px */
    --fs-12: clamp(0.625rem, 0.13vw + 0.6rem, 0.75rem);       /* 10px - 12px */
    --fs-13: clamp(0.6875rem, 0.13vw + 0.66rem, 0.8125rem);   /* 11px - 13px */
    --fs-14: clamp(0.75rem, 0.13vw + 0.73rem, 0.875rem);      /* 12px - 14px */
    --fs-15: clamp(0.75rem, 0.19vw + 0.71rem, 0.9375rem);     /* 12px - 15px */
    --fs-16: clamp(0.8125rem, 0.19vw + 0.78rem, 1rem);        /* 13px - 16px */
    --fs-17: clamp(0.875rem, 0.19vw + 0.84rem, 1.0625rem);    /* 14px - 17px */
    --fs-18: clamp(0.875rem, 0.25vw + 0.83rem, 1.125rem);     /* 14px - 18px */
    --fs-19: clamp(0.9375rem, 0.25vw + 0.89rem, 1.1875rem);   /* 15px - 19px */
    --fs-20: clamp(1rem, 0.25vw + 0.95rem, 1.25rem);          /* 16px - 20px */
    --fs-21: clamp(1rem, 0.31vw + 0.94rem, 1.3125rem);        /* 16px - 21px */
    --fs-22: clamp(1.0625rem, 0.31vw + 1rem, 1.375rem);       /* 17px - 22px */
    --fs-23: clamp(1.125rem, 0.31vw + 1.06rem, 1.4375rem);    /* 18px - 23px */
    --fs-24: clamp(1.125rem, 0.38vw + 1.05rem, 1.5rem);       /* 18px - 24px */
    --fs-25: clamp(1.1875rem, 0.38vw + 1.11rem, 1.5625rem);   /* 19px - 25px */
    
    --fs-30: clamp(1.375rem, 0.5vw + 1.28rem, 1.875rem);      /* 22px - 30px */
    --fs-35: clamp(1.5rem, 0.69vw + 1.36rem, 2.1875rem);      /* 24px - 35px */
    --fs-40: clamp(1.75rem, 0.75vw + 1.6rem, 2.5rem);         /* 28px - 40px */
    --fs-45: clamp(1.875rem, 0.94vw + 1.69rem, 2.8125rem);    /* 30px - 45px */
    --fs-48: clamp(2rem, 1vw + 1.8rem, 3rem);                 /* 32px - 48px */
    --fs-50: clamp(2.125rem, 1vw + 1.93rem, 3.125rem);        /* 34px - 50px */
    --fs-55: clamp(2.25rem, 1.19vw + 2.01rem, 3.4375rem);     /* 36px - 55px */
    --fs-60: clamp(2.5rem, 1.25vw + 2.25rem, 3.75rem);        /* 40px - 60px */

    /* Межстрочные интервалы */
    --lh-tight: 1.1;
    --lh-normal: 1.5;
    --lh-relaxed: 1.8;

    /* Межбуквенный интервал */
    --ls-normal: 0;
    --ls-wide: 0.02em;
    --ls-wider: 0.05em;

    /* =========================
       3. ИНТЕРФЕЙС И РАЗМЕРЫ (UI)
       ========================= */
     /* HERO card */
   --hero-card-min-height: 65vh;
   
    /* Иконки */
    --icon-logo-w: 6.25rem;
    --icon-logo-h: 2.75rem;
    --icon-base: 1.5rem;
    --icon-lg: 2.25rem;

    /* Отступы и контейнеры */
    --container-width: clamp(1400px, 85vw, 1600px);
    --header-padding: clamp(2rem, 3vw, 4rem);
    
    /* Скругления (Border Radius) */
    --radius-sm: 0.5rem;
    --radius-md: 1.25rem;
    --radius-xd: 3rem;
    --radius-full: 9999px;

    /* Анимация */
    --transition-speed: 0.3s;
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);

    /* =========================
       4. ПЕРЕМЕННЫЕ ДИНАМИЧЕСКОГО ФОНА
       ========================= */
    --blob-1-color: #3a3a3a;
    --blob-2-color: #2b2b2b;
    --blob-3-color: #454545;
    --blob-4-color: #1f1f1f;
    --blob-opacity: 0.6;
    --bg-transition: background-color 1.5s ease, opacity 1.5s ease;

    /* =========================
       5. ОТСТУПЫ (SPACING)
       ========================= */
    --section-gap: 10px;  /* Расстояние между большими блоками (Hero, Услуги, Контакты) */
    --section-padding: 80px;
    --block-gap: 0px;     /* Расстояние внутри блока (например, от заголовка H2 до сетки карточек) */
    --gap-lg: 40px;        /* Крупные пробелы (между колонками текста) */
    --gap-md: 20px;        /* Стандартные отступы (внутри карточек, сетки grid) */
    --gap-sm: 10px;        /* Мелкие отступы (между иконкой и текстом) */

    /* =========================
       6. СЛОИ (Z-INDEX)
       ========================= */
    --z-back: -1;          /* Для фоновых блобов и декора */
    --z-normal: 1;         /* Базовый контент */
    --z-sticky: 100;       /* Залипающие элементы */
    --z-header: 1000;      /* Шапка сайта */
    --z-modal: 2000;       /* Всплывающие окна, бургер-меню */
}

/* =========================
   АДАПТИВНОСТЬ
   ========================= */
@media (max-width: 768px) {
    :root {
        --section-gap: 60px;
        --block-gap: 40px;
        --gap-lg: 30px;
        
        --fs-xl: 3rem; 
        --fs-xxl: 4rem; 
    }
}