:root {
    /* Colors  */
    --color-primary: #ffdc11;
    --color-secondary: #000000;
    --color-success: #42b931;
    --color-info: #3498db;
    --color-warning: #ff9500;
    --color-danger: #e73252;
    --color-light: #f8f8f8;
    --color-dark: #000000;
    --color-transparent: transparent;
    --color-current: currentColor;
    --color-white: #fff;
    --color-black: #000;

    /* Darker colors for hover and focus states */
    --color-primary-darker: #ccb00d;
    --color-secondary-darker: #000000;
    --color-success-darker: #349427;
    --color-info-darker: #2979af;
    --color-warning-darker: #cc7700;
    --color-danger-darker: #b82841;
    --color-light-darker: #c6c6c6;
    --color-dark-darker: #000000;
    --color-white-darker: #CCCCCC;
    --color-black-darker: #000000;

    /* Lighter colors for hover states / backgrounds */
    --color-primary-lighter: #ffe340;
    --color-secondary-lighter: #333333;
    --color-success-lighter: #67c75a;
    --color-info-lighter: #5cace2;
    --color-warning-lighter: #ffaa33;
    --color-danger-lighter: #eb5b74;
    --color-light-lighter: #f9f9f9;
    --color-dark-lighter: #333333;
    --color-white-lighter: #FFFFFF;
    --color-black-lighter: #333333;

    /* Contrast colors for text */
    --color-primary-contrast: #000;
    --color-secondary-contrast: #fff;
    --color-success-contrast: #000;
    --color-info-contrast: #000;
    --color-warning-contrast: #000;
    --color-danger-contrast: #fff;
    --color-light-contrast: #000;
    --color-dark-contrast: #fff;
    --color-white-contrast: #000;
    --color-black-contrast: #fff;

    /* Spacing */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 1rem;
    --spacing-4: 1.5rem;
    --spacing-5: 3rem;
    --spacing-6: 4.5rem;
    --spacing-8: 6.0rem;

    /* Screens */
    --screen-sm: 576px;
    --screen-md: 768px;
    --screen-lg: 992px;
    --screen-xl: 1400px;
    --screen-xxl: 1700px;

    /* Breakpoints */
    --breakpoint-xs: 1px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1400px;
    --breakpoint-xxl: 1700px;

    /* Font Family */
    --font-family: "Museo Sans", sans-serif;
    --font-sans: var(--font-family);

    /* Font Sizes */
    --text-html: 16px;
    --text-h1: 3rem;
    --text-h2: 1.7rem;
    --text-h3: 1.3rem;
    --text-h4: 1.0rem;
    --text-h5: 1.1rem;
    --text-h6: 1rem;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: var(--text-h6);
    --text-lg: var(--text-h5);
    --text-xl: var(--text-h4);
    --text-2xl: var(--text-h3);
    --text-3xl: var(--text-h2);
    --text-4xl: 2.25rem;
    --text-5xl: var(--text-h1);
    --text-lead: var(--text-h5);

    /* Font Weights */
    --font-weight-light: 200;
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    /* Border Width */
    --border-width-0: 0;
    --border-width-1: 1px;
    --border-width-2: 2px;
    --border-width-3: 3px;
    --border-width-4: 4px;
    --border-width-5: 5px;

    /* Border Radius */
    --border-radius-none: 0;
    --border-radius: 5px;
    --border-radius-full: 9999px;

    /* Box Shadow */
    --shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);

    /* Container-specific spacing */
    --spacing-container-xs: 20px;
    --spacing-container-sm: 50px;
    --spacing-container-lg: 75px;
    --spacing-container-xl: 10%;
    --spacing-container-xxl: 12%;
}