:root {
    --primary-yellow-color: #FFB510;
    --primary-orange-color: #F48120;
    --primary-dark-grey-color: #262629;
    --primary-red-color: #ED1C24;

    --secondary-mid-grey-color: #6F6D6C;
    --secondary-beige-color: #EFEDE8;

    --primary-gradient: linear-gradient(94.44deg, #FFB510 18.14%, #F48120 90.57%);

    /* New Brand */
    --anim-delay: 150ms;
    --anim-v-shift: 20px;
    --anim-h-shift: 10px;

    --anim--opacity--duration: 650ms;
    --anim--opacity--timing-function: linear;

    --anim--transform--duration: 500ms;
    --anim--transform--timing-function: ease;

    --brand-color-primary: #FF4E16;
    --brand-color-secondary: #FEB022;
    --brand-color-tertiary: #C7FF33;
    --brand-color-quaternary: #AEAEAE;
    --brand-color-white: #FFF;
    --brand-color-black: #272727;
    --brand-color-black-25: #F4F4F4;
    --brand-color-black-50: #E9E9E9;
    --brand-color-black-100: #D4D4D4;
    --brand-color-black-200: #BEBEBE;
    --brand-color-black-400: #939393;
    --brand-color-black-300: #A9A9A9;
    --brand-color-black-500: #737373;
    --brand-color-black-600: #5D5D5D;
    --brand-color-black-700: #525252;
    --brand-color-black-800: #474747;
    --brand-color-black-900: #3D3D3D;
    --brand-color-primary-5: #FFF6F3;

    --brand-gradient: linear-gradient(94.44deg, var(--brand-color-primary) 18.14%, var(--brand-color-secondary) 90.57%);

    --brand-color-error: #ED1C24;
    --brand-color-success: #10B981;

    --brand-color-primary-rgb: 255, 78, 22;
    --brand-color-secondary-rgb: 254, 176, 34;
    --brand-color-tertiary-rgb: 199, 255, 51;
    --brand-color-quaternary-rgb: 174, 174, 174;
    --brand-color-black-rgb: 39, 39, 39;
    --brand-color-white-rgb: 255, 255, 255;

    --brand-btn-font-weight: 500;
    --brand-btn-border-radius: 100px;
    --brand-btn-line-height: 1;
    --brand-btn-outline-border-width: 1px;

    --brand-btn-padding-xl-v: 12px;
    --brand-btn-padding-xl-h: 24px;
    --brand-btn-padding-xl: var(--brand-btn-padding-xl-v) var(--brand-btn-padding-xl-h);
    --brand-btn-gap-xl: 12px;
    --brand-btn-font-size-xl: 18px;
    --brand-btn-border-radius-xl: var(--brand-btn-border-radius);

    --brand-btn-padding-lg-v: 12px;
    --brand-btn-padding-lg-h: 24px;
    --brand-btn-padding-lg: var(--brand-btn-padding-lg-v) var(--brand-btn-padding-lg-h);
    --brand-btn-gap-lg: 12px;
    --brand-btn-font-size-lg: 16px;
    --brand-btn-border-radius-lg: var(--brand-btn-border-radius);

    --brand-btn-padding-md-v: 12px;
    --brand-btn-padding-md-h: 20px;
    --brand-btn-padding-md: var(--brand-btn-padding-md-v) var(--brand-btn-padding-md-h);
    --brand-btn-gap-md: 8px;
    --brand-btn-font-size-md: 14px;
    --brand-btn-border-radius-md: var(--brand-btn-border-radius);

    --brand-btn-padding-sm-v: 8px;
    --brand-btn-padding-sm-h: 12px;
    --brand-btn-padding-sm: var(--brand-btn-padding-sm-v) var(--brand-btn-padding-sm-h);
    --brand-btn-gap-sm: 8px;
    --brand-btn-font-size-sm: 14px;
    --brand-btn-border-radius-sm: var(--brand-btn-border-radius);

    --brand-btn-color--orange--bg: var(--brand-color-primary);
    --brand-btn-color--orange--text: var(--brand-color-white);

    --brand-btn-color--yellow--bg: var(--brand-color-secondary);
    --brand-btn-color--yellow--text: var(--brand-color-black);

    --brand-btn-color--green--bg: var(--brand-color-tertiary);
    --brand-btn-color--green--text: var(--brand-color-black);

    --brand-btn-color--white--bg: var(--brand-color-white);
    --brand-btn-color--white--text: var(--brand-color-black);

    --brand-btn-color--black--bg: var(--brand-color-black);
    --brand-btn-color--black--text: var(--brand-color-white);

    --brand-btn--icon-size: 20px;
    --brand-btn--transistion-length: 0.3s;

    --brand-heading--font-size--display: 54px;
    --brand-heading--font-size--h1: 54px;
    --brand-heading--font-size--h2: 48px;
    --brand-heading--font-size--h3: 40px;
    --brand-heading--font-size--h4: 32px;
    --brand-heading--font-size--h5: 24px;
    --brand-heading--font-size--h6: 20px;
    --brand-heading--font-size--h7: 16px;

    --brand-heading--font-family: "gc_gambioregular", sans-serif;
    --brand-heading--font-weight: 400;
    --brand-heading--line-height: 1.16;
    --brand-heading--letter-spacing: -0.02em;
    --brand-heading--margin-top: 0;
    --brand-heading--margin-bottom: 0;

    --brand-body-text--font-size-1: 24px;
    --brand-body-text--font-size-2: 20px;
    --brand-body-text--font-size-3: 18px;
    --brand-body-text--font-size-4: 16px;
    --brand-body-text--font-size-5: 14px;
    --brand-body-text--font-size-6: 12px;

    --brand-body-text--font-family: "Figtree", sans-serif;
    --brand-body-text--font-weight: 400;
    --brand-body-text--line-height: 1.5;
    --brand-body-text--letter-spacing: -0.01em;

    --brand-subtitle--font-family: var(--brand-body-text--font-family);
    --brand-subtitle--font-weight: 400;
    --brand-subtitle--letter-spacing: -0.02em;
    --brand-subtitle--line-height: 1.4;
    --brand-subtitle--text-transform: none;
    --brand-subtitle--font-size-1: 20px;
    --brand-subtitle--font-size-2: 18px;
    --brand-subtitle--font-size-3: 16px;
    --brand-subtitle--font-size-4: 14px;

    --brand-overline--font-family: var(--brand-body-text--font-family);
    --brand-overline--font-weight: 600;
    --brand-overline--text-transform: uppercase;
    --brand-overline--letter-spacing: 0.08em;
    --brand-overline--line-height: 1;
    --brand-overline--font-size-1: 14px;
    --brand-overline--font-size-2: 12px;

    --brand-icon-svg--arrow--white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E");
    --brand-icon-svg--arrow--grey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23AEAEAE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E");
    --brand-icon-svg--tick--white: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_100_4248)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.05746 7.50032L6.50027 12.9431L14.9431 4.50032L13.2933 2.85052L6.50026 9.64306L2.70724 5.85054L1.05746 7.50032Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_100_4248'%3E%3Crect width='16' height='16' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    --brand-icon-svg--tick--orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FF4E16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
    --brand-icon-svg--arrow--orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FF4E16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-right'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3Cpolyline points='12 5 19 12 12 19'%3E%3C/polyline%3E%3C/svg%3E") !important;
    --brand-icon-svg--tick-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 1.5a10.5 10.5 0 1 1 0 21 10.5 10.5 0 0 1 0-21zm0 1.5a9 9 0 1 0 0 18A9 9 0 0 0 12 3zm5.25 6.31-6.75 6.75-3.75-3.75 1.06-1.06 2.69 2.69 5.69-5.69 1.06 1.06z'/%3E%3C/svg%3E");

    --brand-form--field--bg-color: var(--brand-color-white);
    --brand-form--field--text-color: var(--brand-color-black);
    --brand-form--field--border-color: var(--brand-color-black-50);
    --brand-form--field--border: 1px solid var(--brand-form--field--border-color);
    --brand-form--field--bg-color-disabled: var(--brand-color-black-25);
    --brand-form--field--text-color-disabled: var(--brand-color-black-100);
    --brand-form--field--border-color-disabled: var(--brand-color-black-100);
    --brand-form--field--border-radius: 2px;
    --brand-form--field--padding: 12px;
    --brand-form--field--line-height: 1.5;
    --brand-form--field--label-font-weight: 400;

    --brand-form--check-radio--border-color: var(--brand-color-black-300);
    --brand-form--check-radio--bg-color: var(--brand-form--field--bg-color);
    --brand-form--check-radio--active-color: var(--brand-color-primary);
    --brand-form--check-border-radius: 4px;

    --brand-block-gap-xl: 40px;
    --brand-block-gap-lg: 30px;
    --brand-block-gap-md: 20px;
    --brand-block-gap-sm: 10px;

    --brand-block-gap: var(--brand-block-gap-md);


    /* Overrides for wordpress variables */
    --wp--preset--font-size--small: 12px;
    --wp--preset--font-size--medium: 14px;
    --wp--preset--font-size--large: 18px;
    --wp--preset--font-size--x-large: 24px;

    --wp--style--gallery-gap-default: 20px;
}

@media (max-width: 1023px) {
    :root {
        --brand-heading--font-size--display: 32px;
        --brand-heading--font-size--h1: 32px;
        --brand-heading--font-size--h2: 28px;
        --brand-heading--font-size--h3: 26px;
        --brand-heading--font-size--h4: 24px;
        --brand-heading--font-size--h5: 22px;
        --brand-heading--font-size--h6: 20px;
        --brand-heading--font-size--h7: 16px;

        --wp--preset--font-size--small: 12px;
        --wp--preset--font-size--medium: 14px;
        --wp--preset--font-size--large: 16px;
        --wp--preset--font-size--x-large: 20px;

        --brand-block-gap-xl: 28px;
        --brand-block-gap-lg: 28px;
        --brand-block-gap: 20px;
        --brand-block-gap-sm: 10px;
    }
}
