:root {

    /* =====================================================
       COLORS
    ===================================================== */

    --color-primary: #0B2E59;
    --color-heading: #1B2A3A;
    --color-text: #4A5568;
    --color-background: #FFFFFF;
    --color-surface: #F8FAFC;
    --color-border: #E5E7EB;

    /* =====================================================
       TYPOGRAPHY
    ===================================================== */

    --font-family-base: "Manrope", Arial, sans-serif;

    --font-size-base: 16px;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;

    --line-height-base: 1.7;

    /* =====================================================
       LAYOUT
    ===================================================== */

    --container-width: 1200px;

    --section-padding: 100px;

    --border-radius-small: 8px;
    --border-radius-medium: 18px;
    --border-radius-large: 999px;

    /* =====================================================
       TRANSITIONS
    ===================================================== */

    --transition-fast: .25s ease;
    --transition-normal: .4s ease;

    /* =====================================================
       SHADOWS
    ===================================================== */

    --shadow-small: 0 8px 24px rgba(0, 0, 0, .06);
    --shadow-medium: 0 16px 40px rgba(0, 0, 0, .08);
    --shadow-large: 0 20px 48px rgba(0, 0, 0, .12);

}