:root {
    /* Color Palettes */
    --color-empire-blue: #005db9;
    --color-navy: #0d285a;
    --color-slate: #587888;
    --color-stone: #e2d8d6;
    --color-seafoam: #80b5a8;
    --color-lilac: #aea1bd;
    --color-black: #231f20;
    --color-white: #ffffff;

    /* Fonts */
    --font-poppins: 'Poppins', sans-serif;
    --font-libre-bodoni: 'Libre Bodoni', sans-serif;

    /* Font Weights */
    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-black: 900;

    /* Spacing - Padding & Margins (not official guidelines provided by brand) */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 25px;
    --spacing-xl: 35px;
    --spacing-xxl: 45px;

    /* Box Shadows */
    --box-shadow-default: 0px 4px 4px 0px rgba(0, 0, 0, 0.05);

    /* Z-index (not official guidelines provided by brand) */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;

    /* Transitions (not official guidelines provided by brand) */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Media Query Breakpoints (using Bootstraps 5 standards) */
    --breakpoint-xm: 30rem; /* 480px - this breakpoint is not standard, but commonly differentiates mobile devies to tablets */
    --breakpoint-sm: 36rem; /* 576px */
    --breakpoint-md: 48rem; /* 768px */
    --breakpoint-lg: 62rem; /* 992px */
    --breakpoint-xl: 75rem; /* 1200px */
    --breakpoint-xxl: 87.5rem; /* 1400px */
}