@charset "UTF-8";

/* ============================================ */
/* ============= Define Variables ============= */
/* ============================================ */

:root {
    /* Colors */
    --cl-primary:       var(--cc-primary,       #741D01);
    --cl-secondary:     var(--cc-secondary,     #E2805F);
    --cl-complementary: var(--cc-complementary, #D8C7A3);
    --cl-rollover:      var(--cc-rollover,      #4C1300);
    --cl-background:    var(--cc-background,    #EFE9D8);

    /* Other Colors */
    --cl-text:          var(--cc-text,          #2B211C);
    --cl-dark:          var(--cc-dark,          #4C1300);
    --cl-gray:          var(--cc-gray,          #6A5A4E);
    --cl-light:         var(--cc-light,         #FBF8EE);
    --cl-black:         var(--cc-black,         #191919);
    --cl-white:         var(--cc-white,         #FFFFFF);

    /* System Colors */
    --cl-error-100:     #C00000;
    --cl-warning-100:   #F76800;
    --cl-success-100:   #00A29B;
    --cl-info-100:      #0076CF;
    --cl-error-16:      #F0C2C2;
    --cl-warning-16:    #FDDBC2;
    --cl-success-16:    #C2E9E7;
    --cl-info-16:       #D2F1FD;

    /* Fonts */
    --ff-primary:       'Montserrat', system-ui, sans-serif;
    --ff-display:       'Bebas Neue', 'Oswald', Impact, sans-serif;
    --ff-script:        'Rye', Georgia, serif;

    /* Font Sizes */
    --fs-xl:            64px;
    --fs-40:            40px;
    --fs-32:            32px;
    --fs-24:            24px;
    --fs-20:            20px;
    --fs-body-l:        20px;
    --fs-body-m:        16px;
    --fs-body-s:        14px;
    --fs-body-xs:       12px;

    /* Section Spacing */
    --sp-v:             6.125rem;
    --sp-h:             3.75rem;
    --sp-c:             2rem;

    /* Section Spacing */
    --sp-v-1:           calc(var(--sp-v) / 2);     /* 64px */
    --sp-v-2:           calc(var(--sp-v) / 2.66);  /* 48px */
    --sp-v-3:           calc(var(--sp-v) / 3.5);   /* 36px */

    /* Content Width */
    --w-cont-l:         1440px;
    --w-cont-m:         1180px;
    --w-cont-s:         1024px;

    /* Border Radius */
    --br-xl:            2.00rem;
    --br-l:             1.50rem;
    --br-m:             1.00rem;
    --br-s:             0.50rem;
    --br-xs:            0.25rem;
    --br-50:            50%;

    /* Animation Delay */
    --animate-delay:    2s;
}

@media only screen and (max-width: 1199px) {
    :root {

        --fs-xl:            48px;
        --fs-40:            36px;
        --fs-32:            28px;
        --fs-24:            20px;
        --fs-body-l:        18px;
        --fs-body-m:        16px;
        --fs-body-s:        14px;
        --fs-body-xs:       12px;

        --sp-v:             6rem;
        --sp-h:             3rem;
    }
}

@media only screen and (max-width: 767px) {
    :root {
        --sp-v:             4rem;
        --sp-h:             2rem;
    }
}