:root {
    /* =====================================================
       BRAND
    ===================================================== */

    --brand-red: #e10707;
    --brand-red-dark: #c90606;

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

    --color-white: #ffffff;
    --color-black: #000000;
    --color-charcoal: #171717;

    --color-background-light: #fafafa;
    --color-about-background: #f6f3f2;
    --color-services-card-background: #faf8f7;
    --color-products-background: #f6f3f2;

    --color-dark-section: #2e2e2e;
    --color-dark-section-deep: #242424;

    /* =====================================================
       HEADER
    ===================================================== */

    --header-height: 92px;
    --header-height-scrolled: 72px;
    --header-transition: 0.25s ease;

    /* =====================================================
       CONTAINER
    ===================================================== */

    --container-padding-desktop: 40px;
    --container-padding-tablet: 20px;
    --container-padding-mobile: 16px;

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

    --font-display: "Fjalla One", sans-serif;
    --font-body: "Cantarell", sans-serif;

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

    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-medium: 0.25s ease;

    /* =====================================================
       BORDER RADIUS
    ===================================================== */

    --radius-small: 4px;

    /* =====================================================
       Z-INDEX
    ===================================================== */

    --z-header: 1000;
    --z-overlay: 10;
    --z-content: 20;
}