@font-face {
    font-family: 'ProftechRegular';
    src: url('fonts/Proftech-Regular.ttf') format('ttf'),
    url('fonts/Proftech-Regular.woff2') format('woff2'),
    url('fonts/Proftech-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ProftechMedium';
    src: url('fonts/Proftech-Medium.ttf') format('ttf'),
    url('fonts/Proftech-Medium.woff2') format('woff2'),
    url('fonts/Proftech-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
    /* --- 1. PALETTE (Кольори) --- */
    --color-blue-dark: #0C4A9D;
    --color-blue-dark-rgb: 12, 74, 157;
    --color-blue-light: #4FA9F5;
    --color-blue-light-rgb: 79, 169, 245;
    --color-cream-white: #E5ECF1;
    --color-cream-white-rgb: 229, 236, 241;
    --color-white: #FFFFFF;
    --color-white-rgb: 255, 255, 255;
    --color-black: #111111;
    --color-black-rgb: 17, 17, 17;
    --color-gray-light: #AEB4BA;
    --color-gray-light-rgb: 174, 180, 186;
    --color-gray-dark: #4F5D6F;
    --color-gray-dark-rgb: 79, 93, 111;

    /* --- Semantic Colors --- */
    --color-bg-body: var(--color-white);
    --color-bg-surface: var(--color-white);
    --color-bg-header: var(--color-blue-dark);
    --color-bg-footer: var(--color-gray-light);

    --color-text-body: var(--color-gray-dark);
    --color-text-heading: var(--color-black);
    --color-text-inverse: var(--color-cream-white);
    --color-text-muted: var(--color-gray-light);
    --color-text-footer: var(--color-black);

    --color-link: var(--color-blue-light);
    --color-link-hover: var(--color-blue-light);

    --color-border: var(--color-gray-light);
    --color-accent-dark: var(--color-black);

    --shadow-card: 0 15px 60px rgba(var(--color-gray-dark-rgb), 0.3);
    --shadow-card-hover: 0 30px 60px rgba(var(--color-gray-dark-rgb), 0.5);

    /* --- 2. TYPOGRAPHY (Шрифти) --- */
    --font-main: 'Roboto', system-ui, -apple-system, sans-serif;
    --font-heading: 'Montserrat', 'Roboto', system-ui, sans-serif;
    /*--font-main: 'ProftechMedium', 'Roboto', system-ui, -apple-system, sans-serif;*/
    /*--font-heading: 'ProftechMedium', 'Montserrat', 'Roboto', system-ui, sans-serif;*/

    /* --- 3. SPACING (Відступи - шкала) --- */
    --space-xs: 0.5rem; /* ~8px */
    --space-sm: 1rem; /* ~16px */
    --space-md: 1.5rem; /* ~24px */
    --space-lg: 2.5rem; /* ~40px */
    --space-xl: 4rem; /* ~64px */

    /* Глобальний відступ контейнера */
    --page-pad: 15%;
    --header-height: 100px;

    /* --- 4. UI ELEMENTS (Інтерфейс) --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --transition-fast: 0.2s ease;
    --transition-norm: 0.3s ease;
    --transition-slow: 0.4s ease;
    --transition-ease-in-out: 0.8s ease-in-out;
    --transform-card-hover: translateY(-8px);
    --transform-zoom: scale(1.05);
}