@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Regular.woff2') format('woff2'),
        url('../fonts/Manrope-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Medium.woff2') format('woff2'),
        url('../fonts/Manrope-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Semibold.woff2') format('woff2'),
        url('../fonts/Manrope-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Bold.woff2') format('woff2'),
        url('../fonts/Manrope-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-ExtraBold.woff2') format('woff2'),
        url('../fonts/Manrope-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Colors */
    --color-bg: #f5f8ff;
    --color-surface: #ffffff;
    --color-surface-soft: #eef5ff;

    --color-text: #0f1f33;
    --color-muted: #5f6f85;

    --color-primary: #2f6fcb;
    --color-primary-hover: #245aa8;
    --color-primary-soft: #edf4ff;

    --color-dark: #071a2f;
    --color-dark-2: #0b223d;

    --color-border: #dce6f3;

    /* Typography */
    --font-main: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 32px;
    --text-2xl: 56px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 72px;
    --space-9: 80px;
    --space-10: 96px;

    /* Radius */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    /* Layout */
    --container: 1180px;
    --container-wide: 1320px;

    /* Shadow */
    --shadow-card: 0 16px 40px rgba(15, 31, 51, 0.08);
    --shadow-blue: 0 16px 35px rgba(47, 111, 203, 0.18);
}