:root {
/* Base Tokens */
--size-1: 1px;
--size-2: 2px;
--size-4: 4px;
--size-8: 8px;
--size-12: 12px;
--size-16: 16px;
--size-20: 20px;
--size-24: 24px;
--size-32: 32px;
--size-40: 40px;
--size-48: 48px;
--size-56: 56px;
--size-64: 64px;
--size-96: 96px;
--size-128: 128px;
--size-182: 182px;
--color-base-1000: #f7f7f5;
--color-base-900: #f7f4f4;
--color-base-800: #E1DEDE;
--color-base-600: #d3d3d3;
--color-base-500: #BDBDBD;
--color-base-400: #9a9595;
--color-base-300: #676767;
--color-base-200: #4d4b4b;
--color-base-050: #1E1E1E;
--color-base-000: #000000;
--color-secondary-white: #ffffff;
--color-secondary-yellow: #CDFE00;
--color-secondary-yellow-dark: #FACB00;
--color-secondary-green-000: #66CC33;
--color-secondary-green-900: #F2FCF3;
--color-secondary-green-700: #C6D3B6;
--color-secondary-green-950: #FAFEEC;
--color-secondary-red-000: #B82F36;
--color-secondary-red-900: #FCF2F4;

/* Base Shadows */

--shadow-large:0 177px 49px 0 transparent, 0 113px 45px 0 rgb(0 0 0 / 1%), 0 64px 38px 0 rgb(0 0 0 / 3%), 0 28px 28px 0 rgb(0 0 0 / 5%), 0 7px 16px 0 rgb(0 0 0 / 6%);
--shadow-large-inverted: 0 -177px 49px 0 transparent, 0 -113px 45px 0 rgb(0 0 0 / 1%), 0 -64px 38px 0 rgb(0 0 0 / 3%), 0 -28px 28px 0 rgb(0 0 0 / 5%), 0 -7px 16px 0 rgb(0 0 0 / 6%), 0 5px 10px 0 rgb(0 0 0 / 4%);

/* Semantic Size Tokens */
--size-grid-margin: var(--size-24);
--size-grid-gutter: var(--size-16);
--size-icon-sm: var(--size-16);
--size-icon-md: var(--size-24);
--size-icon-xl: var(--size-48);

--spacing-inner-sm: var(--size-12);
--spacing-inner-md: var(--size-16);
--spacing-inner-lg: var(--size-24);

--spacing-outer-sm: var(--size-64);
--spacing-outer-md: var(--size-128);
--spacing-outer-xl: var(--size-182);

--size-border-sm: var(--size-1);
--size-border-md: var(--size-2);
--size-border-lg: var(--size-4);

--size-icon-lg: var(--size-40);
--size-text-max-width-lg: 912px;

--typography-sans-family: 'Alaire Sans';
--typography-serif-family: 'Alaire Serif';
--typography-sans-regular-weight: 400;
--typography-serif-regular-weight: 400;
--typography-h600-sans-book-size: 97px;
--typography-h600-sans-book-line-height: 92px;
--typography-h600-sans-book-letter-spacing: -4px;
--typography-h600-serif-book-size: 97px;
--typography-h600-serif-book-line-height: 92px;
--typography-h600-serif-book-letter-spacing: -1.5px;
--typography-h500-sans-book-size: 81px;
--typography-h500-sans-book-line-height: 80px;
--typography-h500-sans-book-letter-spacing: -4px;
--typography-h400-sans-book-size: 56px;
--typography-h400-sans-book-line-height: 60px;
--typography-h400-sans-book-letter-spacing: -2.5px;
--typography-h300-sans-book-size: 36px;
--typography-h300-sans-book-line-height: 44px;
--typography-h300-sans-book-letter-spacing: -0.7px;
--typography-h200-sans-book-size: 26px;
--typography-h200-sans-book-line-height: 40px;
--typography-h200-sans-book-letter-spacing: -0.7px;
--typography-h100-sans-book-size: 21px;
--typography-h100-sans-book-line-height: 28px;
--typography-h100-sans-book-letter-spacing: -0.4px;
--typography-h500-serif-book-size: 81px;
--typography-h500-serif-book-line-height: 80px;
--typography-h500-serif-book-letter-spacing: -1.5px;
--typography-h400-serif-book-size: 56px;
--typography-h400-serif-book-line-height: 60px;
--typography-h400-serif-book-letter-spacing: -1px;
--typography-h300-serif-book-size: 36px;
--typography-h300-serif-book-line-height: 44px;
--typography-h300-serif-book-letter-spacing: -0.5px;
--typography-h200-serif-book-size: 26px;
--typography-h200-serif-book-line-height: 40px;
--typography-h200-serif-book-letter-spacing: -0.5px;
--typography-h100-serif-book-size: 21px;
--typography-h100-serif-book-line-height: 28px;
--typography-h100-serif-book-letter-spacing: -0.4px;
--typography-b400-sans-book-size: 18px;
--typography-b400-sans-book-line-height: 28px;
--typography-b400-sans-book-letter-spacing: -0.4px;
--typography-b400-serif-book-size: 18px;
--typography-b400-serif-book-line-height: 28px;
--typography-b400-serif-book-letter-spacing: -0.2px;
--typography-b300-sans-book-size: 16px;
--typography-b300-sans-book-line-height: 24px;
--typography-b300-sans-book-letter-spacing: -0.3px;
--typography-b300-serif-book-size: 16px;
--typography-b300-serif-book-line-height: 24px;
--typography-b300-serif-book-letter-spacing: -0.2px;
--typography-b200-sans-book-size: 14px;
--typography-b200-sans-book-line-height: 20px;
--typography-b200-sans-book-letter-spacing: -0.3px;
--typography-b200-serif-book-size: 14px;
--typography-b200-serif-book-line-height: 20px;
--typography-b200-serif-book-letter-spacing: -0.1px;
--typography-b100-sans-book-size: 12px;
--typography-b100-sans-book-line-height: 20px;
--typography-b100-sans-book-letter-spacing: 0px;
--typography-b100-serif-book-size: 12px;
--typography-b100-serif-book-line-height: 20px;
--typography-b100-serif-book-letter-spacing: 0px;
--size-radius-full: var(--size-64);
--size-radius-xs: var(--size-4);
--size-radius-md: var(--size-8);
--size-radius-lg: var(--size-24);

/* Semantic Color Tokens */

--color-background-default: var(--color-base-1000);
--color-background-default-opacity-90: rgba(247, 247, 245, 0.90);
--color-background-lightest: var(--color-secondary-white);
--color-background-lighter: var(--color-base-900);
--color-background-light: var(--color-base-800);
--color-background-inverted: var(--color-base-050);
--color-background-error: var(--color-secondary-red-900);
--color-background-success: var(--color-secondary-green-900);
--color-border-strong: var(--color-base-000);
--color-border-soft: var(--color-base-600);
--color-border-default: var(--color-base-400);
--color-border-alternative: var(--color-action-primary-default);
--color-border-colored: var(--color-secondary-green-700);
--color-border-transparent: rgba(255, 255, 255, 0);
--color-text-default: var(--color-base-000);
--color-text-soft: var(--color-base-400);
--color-text-inverted: var(--color-base-1000);
--color-text-placeholder: var(--color-base-500);
--color-action-primary-default: var(--color-secondary-yellow);
--color-action-primary-default-on: var(--color-base-000);
--color-action-primary-hover: var(--color-base-000);
--color-action-primary-hover-on: var(--color-base-1000);
--color-action-secondary-default: transparent;
--color-action-secondary-default-on: var(--color-base-000);
--color-action-secondary-hover: var(--color-base-000);
--color-action-secondary-hover-on: var(--color-base-1000);
--color-action-disable: var(--color-base-1000);
--color-action-disable-on: var(--color-base-600);
--color-icon-default: var(--color-base-000);
--color-icon-soft: var(--color-base-400);
--color-status-promo: var(--color-secondary-green-000);
--color-status-success: var(--color-secondary-green-000);
--color-status-error: var(--color-secondary-red-000);
--color-status-warning: var(--color-secondary-yellow-dark);
--color-header-background: rgba(247, 247, 245, 0.7);

}

@media (max-width: 768px) {

:root {

--color-action-primary-hover: var(--color-base-1000);
--color-action-primary-hover-on: var(--color-base-000);

--typography-h600-sans-book-size: 61px;
--typography-h600-sans-book-line-height: 58px;
--typography-h600-sans-book-letter-spacing: -2px;
--typography-h600-serif-book-size: 61px;
--typography-h600-serif-book-line-height: 58px;
--typography-h600-serif-book-letter-spacing: -1px;
--typography-h500-sans-book-size: 48px;
--typography-h500-sans-book-line-height: 42px;
--typography-h500-sans-book-letter-spacing: -2px;
--typography-h500-serif-book-size: 48px;
--typography-h500-serif-book-line-height: 42px;
--typography-h500-serif-book-letter-spacing: -1px;
--typography-h400-sans-book-size: 36px;
--typography-h400-sans-book-line-height: 40px;
--typography-h400-sans-book-letter-spacing: -1px;
--typography-h400-serif-book-size: 36px;
--typography-h400-serif-book-line-height: 40px;
--typography-h400-serif-book-letter-spacing: -1px;
--typography-h300-sans-book-size: 26px;
--typography-h300-sans-book-line-height: 36px;
--typography-h300-sans-book-letter-spacing: -0.5px;
--typography-h300-serif-book-size: 26px;
--typography-h300-serif-book-line-height: 36px;
--typography-h300-serif-book-letter-spacing: -0.2px;
--typography-h200-sans-book-size: 21px;
--typography-h200-sans-book-line-height: 28px;
--typography-h200-sans-book-letter-spacing: -0.4px;
--typography-h200-serif-book-size: 21px;
--typography-h200-serif-book-line-height: 28px;
--typography-h200-serif-book-letter-spacing: -0.4px;
--typography-h100-sans-book-size: 21px;
--typography-h100-sans-book-line-height: 28px;
--typography-h100-sans-book-letter-spacing: -0.4px;
--typography-h100-serif-book-size: 21px;
--typography-h100-serif-book-line-height: 28px;
--typography-h100-serif-book-letter-spacing: -0.4px;

--size-grid-margin: var(--size-16);
--size-grid-gutter: var(--size-16);

--spacing-outer-sm: var(--size-48);
--spacing-outer-md: var(--size-64);
--spacing-outer-xl: var(--size-64);

}

}