/*
 * Brand colours
 */
:root {
	--zds-color-primary: #009EE3;
	--zds-color-secondary: #75b726;
	--zds-color-accent-01: #e5110c;
	--zds-color-accent-02: #ef7d21;
	--zds-color-accent-03: #faaf01;
	--zds-color-accent-04: #8d2ae4;
	--zds-color-accent-03-dark: #D79601;
	--zds-color-primary-dark: #24617B;
	--zds-color-primary-light: #13C6FF;
	--zds-color-primary-subtle: #CCECF9;
	--zds-color-secondary-dark: #506931;
	--zds-color-secondary-light: #98E738;
	--zds-color-secondary-subtle: #E3F1D4;
	--zds-color-accent-01-dark: #7E2D2B;
	--zds-color-accent-01-light: #FF3732;
	--zds-color-accent-01-subtle: #FACFCE;
	--zds-color-accent-02-dark: #6D3719;
	--zds-color-accent-02-light: #FFA860;
	--zds-color-accent-02-subtle: #FCE5D3;
	--zds-color-accent-03-light: #FFCF36;
	--zds-color-accent-03-subtle: #FEEFCC;
	--zds-color-accent-04-dark: #613687;
	--zds-color-accent-04-light: #B466F9;
	--zds-color-accent-04-subtle: #E8D4FA;
	--zds-color-primary-foreground: var(--zds-text-color-contrast);
	--zds-color-primary-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-primary-light-foreground: var(--zds-text-color-contrast);
	--zds-color-primary-light-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-primary-dark-foreground: var(--zds-text-color-contrast);
	--zds-color-primary-dark-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-secondary-foreground: var(--zds-text-color-contrast);
	--zds-color-secondary-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-secondary-light-foreground: var(--zds-text-color-contrast);
	--zds-color-secondary-light-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-secondary-dark-foreground: var(--zds-text-color-contrast);
	--zds-color-secondary-dark-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-accent-01-foreground: var(--zds-text-color-contrast);
	--zds-color-accent-01-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-accent-01-light-foreground: var(--zds-text-color-contrast);
	--zds-color-accent-01-light-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-accent-01-dark-foreground: var(--zds-text-color-contrast);
	--zds-color-accent-01-dark-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-accent-02-foreground: var(--zds-text-color-contrast);
	--zds-color-accent-02-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-accent-02-light-foreground: var(--zds-text-color-contrast);
	--zds-color-accent-02-light-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-accent-02-dark-foreground: var(--zds-text-color-contrast);
	--zds-color-accent-02-dark-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-accent-03-foreground: var(--zds-text-color-base);
	--zds-color-accent-03-foreground-hover: var(--zds-text-color-base-hover);
	--zds-color-accent-03-light-foreground: var(--zds-text-color-base);
	--zds-color-accent-03-light-foreground-hover: var(--zds-text-color-base-hover);
	--zds-color-accent-03-dark-foreground: var(--zds-text-color-base);
	--zds-color-accent-03-dark-foreground-hover: var(--zds-text-color-base-hover);
	--zds-color-accent-04-foreground: var(--zds-text-color-contrast);
	--zds-color-accent-04-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-accent-04-light-foreground: var(--zds-text-color-contrast);
	--zds-color-accent-04-light-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-accent-04-dark-foreground: var(--zds-text-color-contrast);
	--zds-color-accent-04-dark-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-primary-subtle-foreground: var(--zds-text-color-base);
	--zds-color-primary-subtle-foreground-hover: var(--zds-text-color-base-hover);
	--zds-color-secondary-subtle-foreground: var(--zds-text-color-base);
	--zds-color-secondary-subtle-foreground-hover: var(--zds-text-color-base-hover);
	--zds-color-accent-01-subtle-foreground: var(--zds-text-color-base);
	--zds-color-accent-01-subtle-foreground-hover: var(--zds-text-color-base-hover);
	--zds-color-accent-02-subtle-foreground: var(--zds-text-color-base);
	--zds-color-accent-02-subtle-foreground-hover: var(--zds-text-color-base-hover);
	--zds-color-accent-03-subtle-foreground: var(--zds-text-color-base);
	--zds-color-accent-03-subtle-foreground-hover: var(--zds-text-color-base-hover);
	--zds-color-accent-04-subtle-foreground: var(--zds-text-color-base);
	--zds-color-accent-04-subtle-foreground-hover: var(--zds-text-color-base-hover);
}

/*
 * Text colours
 */
:root {
	--zds-text-color-base: #4a4a4a;
	--zds-text-color-base-hover: var(--zds-text-color-loud);
	--zds-text-color-muted: var(--zds-color-grey-400);
	--zds-text-color-loud: var(--zds-color-black);
	--zds-text-color-contrast: var(--zds-color-white);
	--zds-text-color-contrast-hover: #ffffffb0;
	--zds-text-color-danger: #e5110c;
	--zds-text-color-info: #058CC7;
	--zds-text-color-success: #5E8E24;
	--zds-text-color-warning: #C46518;
}

/*
 * Signal colours
 */
:root {
	--zds-color-danger: var(--zds-color-accent-01);
	--zds-color-info: var(--zds-color-primary);
	--zds-color-success: var(--zds-color-secondary);
	--zds-color-warning: var(--zds-color-accent-02);
	--zds-color-highlight: var(--zds-color-accent-03);
	--zds-color-neutral: var(--zds-color-grey-500);
	--zds-color-danger-dark: var(--zds-color-accent-01-dark);
	--zds-color-danger-light: var(--zds-color-accent-01-light);
	--zds-color-danger-subtle: var(--zds-color-accent-01-subtle);
	--zds-color-info-dark: var(--zds-color-primary-dark);
	--zds-color-info-light: var(--zds-color-primary-light);
	--zds-color-info-subtle: var(--zds-color-primary-subtle);
	--zds-color-success-dark: var(--zds-color-secondary-dark);
	--zds-color-success-light: var(--zds-color-secondary-light);
	--zds-color-success-subtle: var(--zds-color-secondary-subtle);
	--zds-color-warning-dark: var(--zds-color-accent-02-dark);
	--zds-color-warning-light: var(--zds-color-accent-02-light);
	--zds-color-warning-subtle: var(--zds-color-accent-02-subtle);
	--zds-color-highlight-dark: var(--zds-color-accent-03-dark);
	--zds-color-highlight-light: var(--zds-color-accent-03-light);
	--zds-color-highlight-subtle: var(--zds-color-accent-03-subtle);
	--zds-color-neutral-dark: #4A555B;
	--zds-color-neutral-light: #82A1AF;
	--zds-color-neutral-subtle: #DFE5E8;
	--zds-color-danger-foreground: var(--zds-color-accent-01-foreground);
	--zds-color-danger-foreground-hover: var(--zds-color-accent-01-foreground-hover);
	--zds-color-danger-light-foreground: var(--zds-text-color-contrast);
	--zds-color-danger-light-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-danger-dark-foreground: var(--zds-text-color-contrast);
	--zds-color-danger-dark-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-info-foreground: var(--zds-color-primary-foreground);
	--zds-color-info-foreground-hover: var(--zds-color-primary-foreground-hover);
	--zds-color-info-light-foreground: var(--zds-text-color-contrast);
	--zds-color-info-light-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-info-dark-foreground: var(--zds-text-color-contrast);
	--zds-color-info-dark-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-success-foreground: var(--zds-color-secondary-foreground);
	--zds-color-success-foreground-hover: var(--zds-color-secondary-foreground-hover);
	--zds-color-success-light-foreground: var(--zds-text-color-contrast);
	--zds-color-success-light-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-success-dark-foreground: var(--zds-text-color-contrast);
	--zds-color-success-dark-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-warning-foreground: var(--zds-color-accent-02-foreground);
	--zds-color-warning-foreground-hover: var(--zds-color-accent-02-foreground-hover);
	--zds-color-warning-light-foreground: var(--zds-text-color-contrast);
	--zds-color-warning-light-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-warning-dark-foreground: var(--zds-text-color-contrast);
	--zds-color-warning-dark-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-highlight-foreground: var(--zds-color-accent-03-foreground);
	--zds-color-highlight-foreground-hover: var(--zds-color-accent-03-foreground-hover);
	--zds-color-highlight-light-foreground: var(--zds-text-color-base);
	--zds-color-highlight-light-foreground-hover: var(--zds-text-color-base-hover);
	--zds-color-highlight-dark-foreground: var(--zds-text-color-base);
	--zds-color-highlight-dark-foreground-hover: var(--zds-text-color-base-hover);
	--zds-color-neutral-foreground: var(--zds-color-grey-500-foreground);
	--zds-color-neutral-foreground-hover: var(--zds-color-grey-500-foreground-hover);
	--zds-color-neutral-light-foreground: var(--zds-color-grey-500-foreground);
	--zds-color-neutral-light-foreground-hover: var(--zds-color-grey-500-foreground-hover);
	--zds-color-neutral-dark-foreground: var(--zds-color-grey-500-foreground);
	--zds-color-neutral-dark-foreground-hover: var(--zds-color-grey-500-foreground-hover);
	--zds-color-danger-subtle-foreground: var(--zds-color-accent-01-subtle-foreground);
	--zds-color-danger-subtle-foreground-hover: var(--zds-color-accent-01-subtle-foreground-hover);
	--zds-color-danger-subtle-light-foreground: var(--zds-color-accent-01-subtle-foreground);
	--zds-color-danger-subtle-light-foreground-hover: var(--zds-color-accent-01-subtle-foreground-hover);
	--zds-color-danger-subtle-dark-foreground: var(--zds-color-accent-01-subtle-foreground);
	--zds-color-danger-subtle-dark-foreground-hover: var(--zds-color-accent-01-subtle-foreground-hover);
	--zds-color-info-subtle-foreground: var(--zds-color-primary-subtle-foreground);
	--zds-color-info-subtle-foreground-hover: var(--zds-color-primary-subtle-foreground-hover);
	--zds-color-info-subtle-light-foreground: var(--zds-color-primary-subtle-foreground);
	--zds-color-info-subtle-light-foreground-hover: var(--zds-color-primary-subtle-foreground-hover);
	--zds-color-info-subtle-dark-foreground: var(--zds-color-primary-subtle-foreground);
	--zds-color-info-subtle-dark-foreground-hover: var(--zds-color-primary-subtle-foreground-hover);
	--zds-color-success-subtle-foreground: var(--zds-color-secondary-subtle-foreground);
	--zds-color-success-subtle-foreground-hover: var(--zds-color-secondary-subtle-foreground-hover);
	--zds-color-success-subtle-light-foreground: var(--zds-color-secondary-subtle-foreground);
	--zds-color-success-subtle-light-foreground-hover: var(--zds-color-secondary-subtle-foreground-hover);
	--zds-color-success-subtle-dark-foreground: var(--zds-color-secondary-subtle-foreground);
	--zds-color-success-subtle-dark-foreground-hover: var(--zds-color-secondary-subtle-foreground-hover);
	--zds-color-warning-subtle-foreground: var(--zds-color-accent-02-subtle-foreground);
	--zds-color-warning-subtle-foreground-hover: var(--zds-color-accent-02-subtle-foreground-hover);
	--zds-color-warning-subtle-light-foreground: var(--zds-color-accent-02-subtle-foreground);
	--zds-color-warning-subtle-light-foreground-hover: var(--zds-color-accent-02-subtle-foreground-hover);
	--zds-color-warning-subtle-dark-foreground: var(--zds-color-accent-02-subtle-foreground);
	--zds-color-warning-subtle-dark-foreground-hover: var(--zds-color-accent-02-subtle-foreground-hover);
	--zds-color-highlight-subtle-foreground: var(--zds-color-accent-03-subtle-foreground);
	--zds-color-highlight-subtle-foreground-hover: var(--zds-color-accent-03-subtle-foreground-hover);
	--zds-color-highlight-subtle-light-foreground: var(--zds-color-accent-03-subtle-foreground);
	--zds-color-highlight-subtle-light-foreground-hover: var(--zds-color-accent-03-subtle-foreground-hover);
	--zds-color-highlight-subtle-dark-foreground: var(--zds-color-accent-03-subtle-foreground);
	--zds-color-highlight-subtle-dark-foreground-hover: var(--zds-color-accent-03-subtle-foreground-hover);
	--zds-color-neutral-subtle-foreground: var(--zds-text-color-base);
	--zds-color-neutral-subtle-foreground-hover: var(--zds-text-color-base-hover);
}

/*
 * Neutral colours
 */
:root {
	--zds-color-grey: var(--zds-color-grey-500);
	--zds-color-grey-25: #f5f7f8;
	--zds-color-grey-50: #eceff1;
	--zds-color-grey-75: #d9e4e7;
	--zds-color-grey-100: #cfd8dc;
	--zds-color-grey-200: #b0bec5;
	--zds-color-grey-300: #90a4ae;
	--zds-color-grey-400: #78909c;
	--zds-color-grey-500: #607d8b;
	--zds-color-grey-600: #546e7a;
	--zds-color-grey-700: #455a64;
	--zds-color-grey-800: #37474f;
	--zds-color-grey-900: #263238;
	--zds-color-white: #ffffff;
	--zds-color-black: #000000;
	--zds-color-grey-foreground: var(--zds-text-color-contrast);
	--zds-color-grey-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-grey-25-foreground: var(--zds-text-color-base);
	--zds-color-grey-25-foreground-hover: var(--zds-text-color-base-hover);
	--zds-color-grey-50-foreground: var(--zds-text-color-base);
	--zds-color-grey-50-foreground-hover: var(--zds-text-color-base-hover);
	--zds-color-grey-75-foreground: var(--zds-text-color-base);
	--zds-color-grey-75-foreground-hover: var(--zds-text-color-base-hover);
	--zds-color-grey-100-foreground: var(--zds-text-color-base);
	--zds-color-grey-100-foreground-hover: var(--zds-text-color-base-hover);
	--zds-color-grey-200-foreground: var(--zds-text-color-base);
	--zds-color-grey-200-foreground-hover: var(--zds-text-color-base-hover);
	--zds-color-grey-300-foreground: var(--zds-text-color-contrast);
	--zds-color-grey-300-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-grey-400-foreground: var(--zds-text-color-contrast);
	--zds-color-grey-400-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-grey-500-foreground: var(--zds-text-color-contrast);
	--zds-color-grey-500-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-grey-600-foreground: var(--zds-text-color-contrast);
	--zds-color-grey-600-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-grey-700-foreground: var(--zds-text-color-contrast);
	--zds-color-grey-700-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-grey-800-foreground: var(--zds-text-color-contrast);
	--zds-color-grey-800-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-grey-900-foreground: var(--zds-text-color-contrast);
	--zds-color-grey-900-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-color-white-foreground: var(--zds-text-color-base);
	--zds-color-white-foreground-hover: var(--zds-text-color-base-hover);
	--zds-color-black-foreground: var(--zds-text-color-contrast);
	--zds-color-black-foreground-hover: var(--zds-text-color-contrast-hover);
}

/*
 * Support colours
 */
:root {
	--zds-color-support-01: #f3f3f3;
	--zds-color-support-02: var(--zds-color-grey-300);
	--zds-color-support-03: var(--zds-color-grey-200);
	--zds-color-support-04: var(--zds-color-grey-100);
	--zds-color-support-05: var(--zds-color-grey-50);
	--zds-color-support-06: var(--zds-color-grey-25);
	--zds-color-support-01-foreground: var(--zds-text-color-base);
	--zds-color-support-01-foreground-hover: var(--zds-text-color-base-hover);
	--zds-color-support-02-foreground: var(--zds-color-grey-300-foreground);
	--zds-color-support-02-foreground-hover: var(--zds-color-grey-300-foreground-hover);
	--zds-color-support-03-foreground: var(--zds-color-grey-200-foreground);
	--zds-color-support-03-foreground-hover: var(--zds-color-grey-200-foreground-hover);
	--zds-color-support-04-foreground: var(--zds-color-grey-100-foreground);
	--zds-color-support-04-foreground-hover: var(--zds-color-grey-100-foreground-hover);
	--zds-color-support-05-foreground: var(--zds-color-grey-50-foreground);
	--zds-color-support-05-foreground-hover: var(--zds-color-grey-50-foreground-hover);
	--zds-color-support-06-foreground: var(--zds-color-grey-25-foreground);
	--zds-color-support-06-foreground-hover: var(--zds-color-grey-25-foreground-hover);
}

/*
 * Gradients
 */
:root {
	--zds-gradient-01-from: var(--zds-color-primary);
	--zds-gradient-01-to: var(--zds-color-primary-dark);
	--zds-gradient-01-foreground: var(--zds-text-color-contrast);
	--zds-gradient-01-foreground-hover: var(--zds-text-color-contrast-hover);
	--zds-gradient-02-from: var(--zds-color-primary-subtle);
	--zds-gradient-02-to: var(--zds-color-white);
	--zds-gradient-02-foreground: var(--zds-text-color-base);
	--zds-gradient-02-foreground-hover: var(--zds-text-color-base-hover);
}

/*
 * Font sizes
 */
:root {
	--zds-font-size-xxs: 0.5625rem;
	--zds-font-size-xs: 0.6875rem;
	--zds-font-size-sm: 0.8125rem;
	--zds-font-size-md: 1rem;
	--zds-font-size-lg: 1.0625rem;
	--zds-font-size-xl: 1.1875rem;
	--zds-font-size-xxl: 1.25rem;
	--zds-font-size-xxxl: 2rem;
	--zds-font-size-xxxxl: 2.5rem;
	--zds-font-size-base: 1rem;
}

/*
 * Typography
 */
:root {
	--zds-typography-body-font-family: arial, opensans, sans-serif;
	--zds-typography-body-font-style: normal;
	--zds-typography-body-font-weight: 400;
	--zds-typography-body-letter-spacing: 0px;
	--zds-typography-body-line-height: 1.5;
	--zds-typography-body-text-transform: none;
	--zds-typography-body-sm-font-family: var(--zds-typography-body-font-family);
	--zds-typography-body-sm-font-size: var(--zds-font-size-sm);
	--zds-typography-body-sm-font-style: var(--zds-typography-body-font-style);
	--zds-typography-body-sm-font-weight: var(--zds-typography-body-font-weight);
	--zds-typography-body-sm-letter-spacing: var(--zds-typography-body-letter-spacing);
	--zds-typography-body-sm-line-height: var(--zds-typography-body-line-height);
	--zds-typography-body-sm-text-transform: var(--zds-typography-body-text-transform);
	--zds-typography-body-md-font-family: var(--zds-typography-body-font-family);
	--zds-typography-body-md-font-size: var(--zds-font-size-md);
	--zds-typography-body-md-font-style: var(--zds-typography-body-font-style);
	--zds-typography-body-md-font-weight: var(--zds-typography-body-font-weight);
	--zds-typography-body-md-letter-spacing: var(--zds-typography-body-letter-spacing);
	--zds-typography-body-md-line-height: var(--zds-typography-body-line-height);
	--zds-typography-body-md-text-transform: var(--zds-typography-body-text-transform);
	--zds-typography-body-lg-font-family: var(--zds-typography-body-font-family);
	--zds-typography-body-lg-font-size: var(--zds-font-size-lg);
	--zds-typography-body-lg-font-style: var(--zds-typography-body-font-style);
	--zds-typography-body-lg-font-weight: var(--zds-typography-body-font-weight);
	--zds-typography-body-lg-letter-spacing: var(--zds-typography-body-letter-spacing);
	--zds-typography-body-lg-line-height: var(--zds-typography-body-line-height);
	--zds-typography-body-lg-text-transform: var(--zds-typography-body-text-transform);
	--zds-typography-caption-font-family: var(--zds-typography-body-font-family);
	--zds-typography-caption-font-style: var(--zds-typography-body-font-style);
	--zds-typography-caption-font-weight: var(--zds-typography-body-font-weight);
	--zds-typography-caption-letter-spacing: 0.3px;
	--zds-typography-caption-line-height: var(--zds-typography-body-line-height);
	--zds-typography-caption-text-transform: var(--zds-typography-body-text-transform);
	--zds-typography-caption-sm-font-family: var(--zds-typography-caption-font-family);
	--zds-typography-caption-sm-font-size: var(--zds-font-size-xs);
	--zds-typography-caption-sm-font-style: var(--zds-typography-caption-font-style);
	--zds-typography-caption-sm-font-weight: var(--zds-typography-caption-font-weight);
	--zds-typography-caption-sm-letter-spacing: var(--zds-typography-caption-letter-spacing);
	--zds-typography-caption-sm-line-height: var(--zds-typography-caption-line-height);
	--zds-typography-caption-sm-text-transform: var(--zds-typography-caption-text-transform);
	--zds-typography-caption-md-font-family: var(--zds-typography-caption-font-family);
	--zds-typography-caption-md-font-size: var(--zds-font-size-sm);
	--zds-typography-caption-md-font-style: var(--zds-typography-caption-font-style);
	--zds-typography-caption-md-font-weight: var(--zds-typography-caption-font-weight);
	--zds-typography-caption-md-letter-spacing: var(--zds-typography-caption-letter-spacing);
	--zds-typography-caption-md-line-height: var(--zds-typography-caption-line-height);
	--zds-typography-caption-md-text-transform: var(--zds-typography-caption-text-transform);
	--zds-typography-headline-font-family: arial, opensans, sans-serif;
	--zds-typography-headline-font-style: normal;
	--zds-typography-headline-font-weight: 700;
	--zds-typography-headline-letter-spacing: 0px;
	--zds-typography-headline-text-transform: none;
	--zds-typography-headline-xs-color: var(--zds-color-primary);
	--zds-typography-headline-xs-font-family: var(--zds-typography-headline-font-family);
	--zds-typography-headline-xs-font-size: var(--zds-font-size-md);
	--zds-typography-headline-xs-font-style: var(--zds-typography-headline-font-style);
	--zds-typography-headline-xs-font-weight: var(--zds-typography-headline-font-weight);
	--zds-typography-headline-xs-letter-spacing: var(--zds-typography-headline-letter-spacing);
	--zds-typography-headline-xs-line-height: 1.5;
	--zds-typography-headline-xs-text-transform: var(--zds-typography-headline-text-transform);
	--zds-typography-headline-sm-color: var(--zds-color-primary);
	--zds-typography-headline-sm-font-family: var(--zds-typography-headline-font-family);
	--zds-typography-headline-sm-font-size: var(--zds-font-size-lg);
	--zds-typography-headline-sm-font-style: var(--zds-typography-headline-font-style);
	--zds-typography-headline-sm-font-weight: var(--zds-typography-headline-font-weight);
	--zds-typography-headline-sm-letter-spacing: var(--zds-typography-headline-letter-spacing);
	--zds-typography-headline-sm-line-height: 1.5;
	--zds-typography-headline-sm-text-transform: var(--zds-typography-headline-text-transform);
	--zds-typography-headline-md-color: var(--zds-color-primary);
	--zds-typography-headline-md-font-family: var(--zds-typography-headline-font-family);
	--zds-typography-headline-md-font-size: var(--zds-font-size-xl);
	--zds-typography-headline-md-font-style: var(--zds-typography-headline-font-style);
	--zds-typography-headline-md-font-weight: var(--zds-typography-headline-font-weight);
	--zds-typography-headline-md-letter-spacing: var(--zds-typography-headline-letter-spacing);
	--zds-typography-headline-md-line-height: 1.5;
	--zds-typography-headline-md-text-transform: var(--zds-typography-headline-text-transform);
	--zds-typography-headline-lg-color: var(--zds-color-primary);
	--zds-typography-headline-lg-font-family: var(--zds-typography-headline-font-family);
	--zds-typography-headline-lg-font-size: var(--zds-font-size-xxl);
	--zds-typography-headline-lg-font-style: var(--zds-typography-headline-font-style);
	--zds-typography-headline-lg-font-weight: var(--zds-typography-headline-font-weight);
	--zds-typography-headline-lg-letter-spacing: var(--zds-typography-headline-letter-spacing);
	--zds-typography-headline-lg-line-height: 1.4;
	--zds-typography-headline-lg-text-transform: var(--zds-typography-headline-text-transform);
	--zds-typography-headline-xl-color: var(--zds-color-primary);
	--zds-typography-headline-xl-font-family: var(--zds-typography-headline-font-family);
	--zds-typography-headline-xl-font-size: var(--zds-font-size-xxxl);
	--zds-typography-headline-xl-font-style: var(--zds-typography-headline-font-style);
	--zds-typography-headline-xl-font-weight: var(--zds-typography-headline-font-weight);
	--zds-typography-headline-xl-letter-spacing: var(--zds-typography-headline-letter-spacing);
	--zds-typography-headline-xl-line-height: 1.4;
	--zds-typography-headline-xl-text-transform: var(--zds-typography-headline-text-transform);
	--zds-typography-headline-xxl-color: var(--zds-color-accent-01);
	--zds-typography-headline-xxl-font-family: var(--zds-typography-headline-font-family);
	--zds-typography-headline-xxl-font-size: var(--zds-font-size-xxxxl);
	--zds-typography-headline-xxl-font-style: var(--zds-typography-headline-font-style);
	--zds-typography-headline-xxl-font-weight: var(--zds-typography-headline-font-weight);
	--zds-typography-headline-xxl-letter-spacing: var(--zds-typography-headline-letter-spacing);
	--zds-typography-headline-xxl-line-height: 1.2;
	--zds-typography-headline-xxl-text-transform: var(--zds-typography-headline-text-transform);
	--zds-typography-headline-color-primary-subtle-foreground: #097CAF;
	--zds-typography-headline-color-primary-subtle-foreground-hover: #097CAF;
	--zds-typography-headline-color-secondary-subtle-foreground: #5E8E24;
	--zds-typography-headline-color-secondary-subtle-foreground-hover: #5E8E24;
	--zds-typography-headline-color-accent-01-subtle-foreground: #C91410;
	--zds-typography-headline-color-accent-01-subtle-foreground-hover: #C91410;
	--zds-typography-headline-color-accent-02-subtle-foreground: #C46518;
	--zds-typography-headline-color-accent-02-subtle-foreground-hover: #C46518;
	--zds-typography-headline-color-accent-03-subtle-foreground: #A97B0E;
	--zds-typography-headline-color-accent-03-subtle-foreground-hover: #A97B0E;
	--zds-typography-headline-color-accent-04-subtle-foreground: var(--zds-color-accent-04);
	--zds-typography-headline-color-accent-04-subtle-foreground-hover: var(--zds-color-accent-04);
	--zds-typography-headline-color-danger-subtle-foreground: #C91410;
	--zds-typography-headline-color-danger-subtle-foreground-hover: #C91410;
	--zds-typography-headline-color-info-subtle-foreground: #097CAF;
	--zds-typography-headline-color-info-subtle-foreground-hover: #097CAF;
	--zds-typography-headline-color-success-subtle-foreground: #5E8E24;
	--zds-typography-headline-color-success-subtle-foreground-hover: #5E8E24;
	--zds-typography-headline-color-warning-subtle-foreground: #C46518;
	--zds-typography-headline-color-warning-subtle-foreground-hover: #C46518;
	--zds-typography-headline-color-highlight-subtle-foreground: #A97B0E;
	--zds-typography-headline-color-highlight-subtle-foreground-hover: #A97B0E;
	--zds-typography-headline-color-neutral-subtle-foreground: var(--zds-color-neutral);
	--zds-typography-headline-color-neutral-subtle-foreground-hover: var(--zds-color-neutral);
	--zds-typography-label-font-family: var(--zds-typography-body-font-family);
	--zds-typography-label-font-size: var(--zds-font-size-xs);
	--zds-typography-label-font-style: var(--zds-typography-body-font-style);
	--zds-typography-label-font-weight: var(--zds-typography-body-font-weight);
	--zds-typography-label-letter-spacing: var(--zds-typography-body-letter-spacing);
	--zds-typography-label-line-height: var(--zds-typography-body-line-height);
	--zds-typography-label-text-transform: uppercase;
	--zds-typography-overline-font-family: var(--zds-typography-body-font-family);
	--zds-typography-overline-font-size: var(--zds-font-size-xs);
	--zds-typography-overline-font-style: var(--zds-typography-body-font-style);
	--zds-typography-overline-font-weight: var(--zds-typography-body-font-weight);
	--zds-typography-overline-letter-spacing: var(--zds-typography-body-letter-spacing);
	--zds-typography-overline-line-height: var(--zds-typography-body-line-height);
	--zds-typography-overline-text-transform: uppercase;
	--zds-typography-subheadline-font-family: arial, helvetica, sans-serif;
	--zds-typography-subheadline-font-style: var(--zds-typography-body-font-style);
	--zds-typography-subheadline-font-weight: var(--zds-typography-body-font-weight);
	--zds-typography-subheadline-letter-spacing: var(--zds-typography-body-letter-spacing);
	--zds-typography-subheadline-line-height: var(--zds-typography-body-line-height);
	--zds-typography-subheadline-text-transform: var(--zds-typography-body-text-transform);
	--zds-typography-subheadline-sm-color: var(--zds-text-color-base);
	--zds-typography-subheadline-sm-font-family: var(--zds-typography-subheadline-font-family);
	--zds-typography-subheadline-sm-font-size: var(--zds-font-size-md);
	--zds-typography-subheadline-sm-font-style: var(--zds-typography-subheadline-font-style);
	--zds-typography-subheadline-sm-font-weight: var(--zds-typography-subheadline-font-weight);
	--zds-typography-subheadline-sm-letter-spacing: var(--zds-typography-subheadline-letter-spacing);
	--zds-typography-subheadline-sm-line-height: var(--zds-typography-subheadline-line-height);
	--zds-typography-subheadline-sm-text-transform: var(--zds-typography-subheadline-text-transform);
	--zds-typography-subheadline-md-color: var(--zds-text-color-base);
	--zds-typography-subheadline-md-font-family: var(--zds-typography-subheadline-font-family);
	--zds-typography-subheadline-md-font-size: var(--zds-font-size-lg);
	--zds-typography-subheadline-md-font-style: var(--zds-typography-subheadline-font-style);
	--zds-typography-subheadline-md-font-weight: var(--zds-typography-subheadline-font-weight);
	--zds-typography-subheadline-md-letter-spacing: var(--zds-typography-subheadline-letter-spacing);
	--zds-typography-subheadline-md-line-height: var(--zds-typography-subheadline-line-height);
	--zds-typography-subheadline-md-text-transform: var(--zds-typography-subheadline-text-transform);
	--zds-typography-uniwidth-font-family: pt-root-ui, sans-serif;
}

/*
 * Spacing
 */
:root {
	--zds-space-1: 4px;
	--zds-space-2: 8px;
	--zds-space-3: 12px;
	--zds-space-4: 16px;
	--zds-space-5: 20px;
	--zds-space-6: 24px;
	--zds-space-7: 28px;
	--zds-space-8: 32px;
	--zds-space-9: 36px;
	--zds-space-10: 40px;
	--zds-space-12: 48px;
	--zds-space-14: 56px;
	--zds-space-16: 64px;
	--zds-space-20: 80px;
	--zds-space-24: 96px;
	--zds-space-32: 128px;
	--zds-space-0_5: 2px;
	--zds-space-1_5: 6px;
	--zds-space-base: var(--zds-space-4);
}

/*
 * Grid
 */
:root {
	--zds-grid-gutter-x: var(--zds-space-6);
	--zds-grid-gutter-y: var(--zds-space-6);
}

/*
 * Shape radius
 */
:root {
	--zds-shape-radius-xs: 2px;
	--zds-shape-radius-sm: 4px;
	--zds-shape-radius-md: 8px;
	--zds-shape-radius-lg: 12px;
	--zds-shape-radius-xl: 24px;
	--zds-shape-radius-pill: 1000px;
	--zds-shape-radius-circle: 50%;
}

/*
 * Shadows
 */
:root {
	--zds-shadow-softbox: 0 5px 16px rgba(38, 50, 56, 0.05);
	--zds-shadow-light-sm: 0 1px 6px rgba(38, 50, 56, 0.15), 0 0 1px rgba(38, 50, 56, 0.10);
	--zds-shadow-light-md: 0 2px 12px rgba(38, 50, 56, 0.15), 0 1px 3px rgba(38, 50, 56, 0.10);
	--zds-shadow-light-lg: 0 4px 20px rgba(38, 50, 56, 0.15), 0 2px 4px rgba(38, 50, 56, 0.10);
	--zds-shadow-light-xl: 0 8px 32px rgba(38, 50, 56, 0.15), 0 4px 6px rgba(38, 50, 56, 0.10);
	--zds-shadow-dark-sm: 0 2px 3px rgba(38, 50, 56, 0.40), 0 1px 3px 1px rgba(38, 50, 56, 0.30);
	--zds-shadow-dark-md: 0 3px 5px rgba(38, 50, 56, 0.40), 0 2px 12px 0 rgba(38, 50, 56, 0.30);
	--zds-shadow-dark-lg: 0 4px 6px rgba(38, 50, 56, 0.40), 0 4px 20px 0 rgba(38, 50, 56, 0.30);
	--zds-shadow-dark-xl: 0 6px 9px rgba(38, 50, 56, 0.40), 0 8px 32px 0 rgba(38, 50, 56, 0.30);
}

/*
 * Text shadows
 */
:root {
	--zds-text-shadow-base: 0 1px 5px #0000004d;
}

/*
 * Transitions
 */
:root {
	--zds-transition-sm: 200ms cubic-bezier(0.65, 0.04, 0.35, 1);
	--zds-transition-md: 300ms cubic-bezier(0.65, 0.04, 0.35, 1);
	--zds-transition-type-ease: cubic-bezier(0.65, 0.04, 0.35, 1);
	--zds-transition-type-ease-in: cubic-bezier(0.55, 0.05, 0.67, 0.19);
	--zds-transition-type-ease-out: cubic-bezier(0.22, 0.61, 0.35, 1);
	--zds-transition-type-ease-shake: cubic-bezier(0.32, -0.15, 0.38, 1.3);
	--zds-transition-type-ease-out-shake: cubic-bezier(0.175, 0.885, 0.32, 1.25);
}

/*
 * Outlines
 */
:root {
	--zds-outline-color: var(--zds-color-primary);
	--zds-outline-shape: solid 3px;
	--zds-outline-offset: 3px;
}

/*
 * Motion for images
 */
:root {
	--zds-motion-image-hover-transform: scale(1.05);
	--zds-motion-image-hover-transition: 250ms ease-out;
}

/*
 * Miscellaneous tokens
 */
:root {
	--zds-accordion-body-inset: 8px 0px 16px;
	--zds-accordion-divider-background: #3a3e4133;
	--zds-accordion-divider-height: 1px;
	--zds-accordion-header-background-hover: var(--zds-color-grey-25);
	--zds-accordion-header-color: var(--zds-text-color-base);
	--zds-accordion-header-color-hover: var(--zds-color-primary);
	--zds-accordion-header-color-active: var(--zds-accordion-header-color-hover);
	--zds-accordion-header-font-family: var(--zds-typography-headline-font-family);
	--zds-accordion-header-font-size: var(--zds-typography-headline-xs-font-size);
	--zds-accordion-header-font-weight: 600;
	--zds-accordion-header-inset: var(--zds-space-4);
	--zds-accordion-header-text-decoration-hover: none;
	--zds-accordion-icon-color: var(--zds-text-color-base);
	--zds-accordion-icon-color-hover: var(--zds-color-primary);
	--zds-accordion-icon-color-active: var(--zds-accordion-icon-color-hover);
	--zds-accordion-icon-font-size: var(--zds-font-size-lg);
	--zds-accordion-indicator-color: var(--zds-accordion-header-color-active);
	--zds-accordion-inset-x: 16px;
	--zds-avatar-background: var(--zds-color-primary);
	--zds-avatar-border-color: var(--zds-avatar-background);
	--zds-avatar-border-radius: var(--zds-shape-radius-circle);
	--zds-avatar-border-width: 2px;
	--zds-avatar-color: var(--zds-color-primary-foreground);
	--zds-backdrop-background: #2632383F;
	--zds-backdrop-blur: 3px;
	--zds-badge-background: var(--zds-color-primary);
	--zds-badge-border-radius: var(--zds-shape-radius-sm);
	--zds-badge-color: var(--zds-color-white);
	--zds-badge-empty-size: var(--zds-space-3);
	--zds-badge-font-size: .75em;
	--zds-badge-font-weight: var(--zds-typography-body-font-weight);
	--zds-badge-inset-x: .4em;
	--zds-badge-inset-y: .25em;
	--zds-breadcrumb-color: var(--zds-text-color-base);
	--zds-breadcrumb-color-hover: var(--zds-color-primary);
	--zds-breadcrumb-font-size: var(--zds-font-size-md);
	--zds-breadcrumb-text-decoration: none;
	--zds-breadcrumb-text-decoration-hover: underline;
	--zds-button-border-radius: var(--zds-shape-radius-xl);
	--zds-button-border-width: 1px;
	--zds-button-font-family: var(--zds-typography-body-font-family);
	--zds-button-font-style: var(--zds-typography-body-font-style);
	--zds-button-font-weight: 600;
	--zds-button-border-gradient: none;
	--zds-button-border-gradient-hover: none;
	--zds-button-inset-x: var(--zds-space-4);
	--zds-button-inset-y: var(--zds-space-1_5);
	--zds-button-scale-hover: 1;
	--zds-button-shadow: none;
	--zds-button-text-transform: none;
	--zds-button-preset-primary-contained-background: var(--zds-color-secondary);
	--zds-button-preset-primary-contained-background-hover: var(--zds-color-secondary-dark);
	--zds-button-preset-primary-contained-border-color: var(--zds-button-preset-primary-contained-background);
	--zds-button-preset-primary-contained-border-color-hover: var(--zds-button-preset-primary-contained-background-hover);
	--zds-button-preset-primary-contained-color: var(--zds-color-secondary-foreground);
	--zds-button-preset-primary-contained-color-hover: var(--zds-color-secondary-dark-foreground);
	--zds-button-preset-primary-outlined-background-hover: color-mix(in srgb, var(--zds-color-secondary) 10%, #ffffff);
	--zds-button-preset-primary-outlined-border-color: var(--zds-button-preset-primary-contained-border-color);
	--zds-button-preset-primary-outlined-border-color-hover: var(--zds-button-preset-primary-contained-border-color-hover);
	--zds-button-preset-primary-outlined-color: var(--zds-button-preset-primary-contained-background);
	--zds-button-preset-primary-outlined-color-hover: var(--zds-button-preset-primary-contained-background-hover);
	--zds-button-preset-primary-text-background-hover: var(--zds-button-preset-primary-outlined-background-hover);
	--zds-button-preset-primary-text-color: var(--zds-button-preset-primary-contained-background);
	--zds-button-preset-primary-text-color-hover: var(--zds-button-preset-primary-contained-background-hover);
	--zds-button-preset-secondary-contained-background: var(--zds-color-primary);
	--zds-button-preset-secondary-contained-background-hover: var(--zds-color-primary-dark);
	--zds-button-preset-secondary-contained-border-color: var(--zds-button-preset-secondary-contained-background);
	--zds-button-preset-secondary-contained-border-color-hover: var(--zds-button-preset-secondary-contained-background-hover);
	--zds-button-preset-secondary-contained-color: var(--zds-color-primary-foreground);
	--zds-button-preset-secondary-contained-color-hover: var(--zds-color-primary-dark-foreground);
	--zds-button-preset-secondary-outlined-background-hover: color-mix(in srgb, var(--zds-color-primary) 10%, #ffffff);
	--zds-button-preset-secondary-outlined-border-color: var(--zds-button-preset-secondary-contained-border-color);
	--zds-button-preset-secondary-outlined-border-color-hover: var(--zds-button-preset-secondary-contained-border-color-hover);
	--zds-button-preset-secondary-outlined-color: var(--zds-button-preset-secondary-contained-background);
	--zds-button-preset-secondary-outlined-color-hover: var(--zds-button-preset-secondary-contained-background-hover);
	--zds-button-preset-secondary-text-background-hover: var(--zds-button-preset-secondary-outlined-background-hover);
	--zds-button-preset-secondary-text-color: var(--zds-button-preset-secondary-contained-background);
	--zds-button-preset-secondary-text-color-hover: var(--zds-button-preset-secondary-contained-background-hover);
	--zds-button-preset-accent-contained-background: var(--zds-color-accent-01);
	--zds-button-preset-accent-contained-background-hover: var(--zds-color-accent-01-dark);
	--zds-button-preset-accent-contained-border-color: var(--zds-button-preset-accent-contained-background);
	--zds-button-preset-accent-contained-border-color-hover: var(--zds-button-preset-accent-contained-background-hover);
	--zds-button-preset-accent-contained-color: var(--zds-color-accent-01-foreground);
	--zds-button-preset-accent-contained-color-hover: var(--zds-color-accent-01-dark-foreground);
	--zds-button-preset-accent-outlined-background-hover: color-mix(in srgb, var(--zds-color-accent-01) 10%, #ffffff);
	--zds-button-preset-accent-outlined-border-color: var(--zds-button-preset-accent-contained-border-color);
	--zds-button-preset-accent-outlined-border-color-hover: var(--zds-button-preset-accent-contained-border-color-hover);
	--zds-button-preset-accent-outlined-color: var(--zds-button-preset-accent-contained-background);
	--zds-button-preset-accent-outlined-color-hover: var(--zds-button-preset-accent-contained-background-hover);
	--zds-button-preset-accent-text-background-hover: var(--zds-button-preset-accent-outlined-background-hover);
	--zds-button-preset-accent-text-color: var(--zds-button-preset-accent-contained-background);
	--zds-button-preset-accent-text-color-hover: var(--zds-button-preset-accent-contained-background-hover);
	--zds-button-preset-neutral-contained-background: var(--zds-color-grey-100);
	--zds-button-preset-neutral-contained-background-hover: var(--zds-color-grey-200);
	--zds-button-preset-neutral-contained-border-color: var(--zds-button-preset-neutral-contained-background);
	--zds-button-preset-neutral-contained-border-color-hover: var(--zds-button-preset-neutral-contained-background-hover);
	--zds-button-preset-neutral-contained-color: var(--zds-color-grey-100-foreground);
	--zds-button-preset-neutral-contained-color-hover: var(--zds-color-grey-200-foreground-hover);
	--zds-button-preset-neutral-outlined-background-hover: color-mix(in srgb, var(--zds-color-grey-100) 25%, #ffffff);
	--zds-button-preset-neutral-outlined-border-color: var(--zds-button-preset-neutral-contained-border-color);
	--zds-button-preset-neutral-outlined-border-color-hover: var(--zds-button-preset-neutral-contained-border-color-hover);
	--zds-button-preset-neutral-outlined-color: var(--zds-text-color-base);
	--zds-button-preset-neutral-outlined-color-hover: var(--zds-text-color-base-hover);
	--zds-button-preset-neutral-text-background-hover: var(--zds-button-preset-neutral-outlined-background-hover);
	--zds-button-preset-neutral-text-color: var(--zds-text-color-base);
	--zds-button-preset-neutral-text-color-hover: var(--zds-text-color-base-hover);
	--zds-calendar-border-radius: var(--zds-input-border-radius);
	--zds-calendar-button-background-active: var(--zds-button-preset-primary-contained-background);
	--zds-calendar-button-background-hover: var(--zds-button-preset-primary-outlined-background-hover);
	--zds-calendar-button-border-radius: var(--zds-button-border-radius);
	--zds-calendar-button-color: var(--zds-text-color-base);
	--zds-calendar-button-color-active: var(--zds-button-preset-primary-contained-color);
	--zds-calendar-button-color-disabled: color-mix(in srgb, var(--zds-color-grey-400) 50%, grey);
	--zds-calendar-button-color-hover: var(--zds-button-preset-primary-outlined-color-hover);
	--zds-calendar-header-color: var(--zds-text-color-base);
	--zds-card-background: var(--zds-color-white);
	--zds-card-border-color: var(--zds-color-grey-100);
	--zds-card-border-color-hover: var(--zds-color-grey-200);
	--zds-card-border-radius: var(--zds-shape-radius-md);
	--zds-card-border-width: 1px;
	--zds-card-box-shadow: none;
	--zds-card-box-shadow-hover: var(--zds-card-box-shadow);
	--zds-card-color: var(--zds-text-color-base);
	--zds-card-transition: 300ms ease-out;
	--zds-card-media-border-radius: 0;
	--zds-card-status-background: var(--zds-color-primary);
	--zds-card-status-color: var(--zds-color-primary-foreground);
	--zds-card-status-text-align: center;
	--zds-card-status-text-transform: uppercase;
	--zds-card-body-inset: var(--zds-space-3);
	--zds-card-icon-color: var(--zds-color-accent-01);
	--zds-card-icon-color-hover: var(--zds-color-accent-01-dark);
	--zds-card-icon-transform-hover: translateY(-5px);
	--zds-card-preheader-color: var(--zds-color-accent-01);
	--zds-card-header-color: var(--zds-typography-headline-md-color);
	--zds-card-header-color-hover: var(--zds-card-header-color);
	--zds-card-header-font-size: var(--zds-typography-headline-md-font-size);
	--zds-card-header-font-weight: var(--zds-typography-headline-md-font-weight);
	--zds-card-subheader-color: var(--zds-card-color);
	--zds-card-footer-border-color: var(--zds-card-border-color);
	--zds-card-footer-border-width: var(--zds-card-border-width);
	--zds-carousel-pagination-color-active: var(--zds-color-primary);
	--zds-carousel-close-button-offset-top: 0;
	--zds-checkbox-inset-x: 0;
	--zds-checkbox-inset-y: 6px;
	--zds-chip-background: var(--zds-color-white);
	--zds-chip-background-hover: var(--zds-color-grey-50);
	--zds-chip-border: var(--zds-input-border-color);
	--zds-chip-border-hover: var(--zds-color-grey-100);
	--zds-chip-border-radius: var(--zds-shape-radius-sm);
	--zds-chip-font-size: var(--zds-font-size-md);
	--zds-chip-font-weight: 400;
	--zds-chip-inset-x: .75em;
	--zds-chip-inset-y: .375em;
	--zds-content-reveal-fade-color: #ffffffff;
	--zds-table-header-cell-font-weight: normal;
	--zds-table-background-hover: var(--zds-color-grey-50);
	--zds-table-border-color: var(--zds-color-grey-100);
	--zds-table-header-border-color: var(--zds-color-grey-900);
	--zds-table-vertical-align: top;
	--zds-divider-color: var(--zds-color-grey-900);
	--zds-divider-color-light: var(--zds-color-white);
	--zds-divider-opacity: 0.2;
	--zds-drawer-border-radius: var(--zds-shape-radius-lg);
	--zds-drawer-inset-x: var(--zds-space-6);
	--zds-drawer-body-inset-y: var(--zds-space-6);
	--zds-drawer-header-inset-y: var(--zds-space-4);
	--zds-drawer-size: auto;
	--zds-input-background: var(--zds-color-white);
	--zds-input-background-disabled: var(--zds-color-grey-50);
	--zds-input-background-on: var(--zds-color-primary);
	--zds-input-border-color: var(--zds-color-grey-100);
	--zds-input-border-color-focus: var(--zds-color-primary);
	--zds-input-border-color-invalid: var(--zds-color-danger);
	--zds-input-border-gradient: none;
	--zds-input-border-gradient-focus: none;
	--zds-input-border-radius: var(--zds-shape-radius-sm);
	--zds-input-border-width: 1px;
	--zds-input-box-shadow-focus: 0 0 0 0.25rem color-mix(in srgb, var(--zds-color-primary) 20%, transparent);
	--zds-input-box-shadow-invalid: 0 0 0 0.25rem color-mix(in srgb, var(--zds-color-danger) 20%, transparent);
	--zds-input-color: var(--zds-text-color-base);
	--zds-input-font-size: var(--zds-font-size-md);
	--zds-input-font-weight: 400;
	--zds-input-inset-x: var(--zds-space-3);
	--zds-input-inset-y: var(--zds-space-1_5);
	--zds-input-instant-save-background-focus: var(--zds-input-background);
	--zds-input-instant-save-background-hover: var(--zds-color-grey-25);
	--zds-input-instant-save-border-color-hover: var(--zds-color-grey-200);
	--zds-input-label-font-weight: 700;
	--zds-input-line-height: 1.5;
	--zds-input-placeholder-color: var(--zds-color-grey-400);
	--zds-input-placeholder-font-style: normal;
	--zds-input-text-align: left;
	--zds-item-background-color-hover: transparent;
	--zds-item-color-hover: var(--zds-color-accent-01);
	--zds-item-inset-x: 0px;
	--zds-item-inset-y: var(--zds-space-4);
	--zds-item-label-color: var(--zds-color-accent-01);
	--zds-link-cta-color: var(--zds-link-color);
	--zds-link-cta-color-hover: var(--zds-link-color-hover);
	--zds-link-cta-color-visited: var(--zds-link-color-visited);
	--zds-link-cta-text-decoration: var(--zds-link-text-decoration);
	--zds-link-cta-text-decoration-hover: var(--zds-link-text-decoration-hover);
	--zds-link-color: var(--zds-color-accent-01);
	--zds-link-color-hover: var(--zds-color-accent-01-light);
	--zds-link-color-visited: var(--zds-link-color);
	--zds-link-text-decoration: none;
	--zds-link-text-decoration-hover: underline;
	--zds-map-marker-background: var(--zds-color-primary);
	--zds-map-marker-background-hover: var(--zds-color-primary-dark);
	--zds-map-marker-border-radius: var(--zds-shape-radius-pill);
	--zds-map-marker-border-width: 2px;
	--zds-map-marker-box-shadow: 0px 3px 10px rgba(0, 0, 0, 50%);
	--zds-map-marker-box-shadow-hover: 0px 0px 0px 4px #009EE370;
	--zds-map-marker-color: var(--zds-color-primary-foreground);
	--zds-map-marker-color-hover: var(--zds-color-primary-foreground);
	--zds-map-marker-font-weight: bold;
	--zds-map-marker-inset: var(--zds-space-2);
	--zds-map-marker-cluster-box-shadow: 0px 0px 0px 4px #009EE3A8;
	--zds-map-marker-cluster-box-shadow-hover: var(--zds-map-marker-cluster-box-shadow);
	--zds-map-marker-selected-border-color: var(--zds-color-primary-foreground);
	--zds-menu-item-background-hover: var(--zds-color-grey-50);
	--zds-menu-item-border: none;
	--zds-menu-item-inset-x: var(--zds-space-4);
	--zds-menu-item-inset-y: var(--zds-space-2);
	--zds-modal-background: #ffffff ;
	--zds-modal-border-radius: var(--zds-shape-radius-lg);
	--zds-modal-header-color: var(--zds-text-color-base);
	--zds-modal-header-font-family: var(--zds-typography-headline-font-family);
	--zds-modal-header-font-size: var(--zds-font-size-lg);
	--zds-modal-header-font-weight: var(--zds-typography-headline-font-weight);
	--zds-modal-header-text-align: center;
	--zds-modal-inset: var(--zds-space-4);
	--zds-modal-max-height: 1000px;
	--zds-modal-scroll-shadow-blur-radius: 12px;
	--zds-modal-scroll-shadow-color: var(--zds-color-grey-100);
	--zds-modal-scroll-shadow-offset-y: 4px;
	--zds-modal-scroll-shadow-spread-radius: -8px;
	--zds-modal-width: 500px;
	--zds-navigation-background: var(--zds-color-white);
	--zds-navigation-color: var(--zds-text-color-base);
	--zds-navigation-link-color: var(--zds-text-color-base);
	--zds-navigation-link-color-active: var(--zds-color-primary);
	--zds-navigation-link-color-hover: var(--zds-color-primary);
	--zds-navigation-link-font-family: var(--zds-typography-body-font-family);
	--zds-navigation-link-font-weight: 700;
	--zds-navigation-link-size: var(--zds-font-size-md);
	--zds-navigation-link-text-transform: none;
	--zds-navigation-logo-scale-hover: 1.02;
	--zds-navigation-body-link-color: var(--zds-text-color-base);
	--zds-navigation-body-link-color-active: var(--zds-color-primary);
	--zds-navigation-body-link-color-hover: var(--zds-color-primary);
	--zds-navigation-body-link-size: var(--zds-typography-headline-md-font-size);
	--zds-navigation-body-link-icon-size: var(--zds-navigation-body-link-size);
	--zds-navigation-title-color: var(--zds-typography-headline-xl-color);
	--zds-navigation-title-size: var(--zds-typography-headline-xl-font-size);
	--zds-navigation-panel-link-color: var(--zds-text-color-base);
	--zds-navigation-panel-link-color-hover: var(--zds-navigation-panel-link-color);
	--zds-navigation-panel-link-size: var(--zds-typography-headline-md-font-size);
	--zds-navigation-panel-link-font-weight: var(--zds-typography-headline-md-font-weight);
	--zds-navigation-panel-link-icon-size: var(--zds-navigation-panel-link-size);
	--zds-navigation-panel-link-level-2-color: var(--zds-navigation-color);
	--zds-navigation-panel-link-level-2-color-hover: var(--zds-navigation-panel-link-color-hover);
	--zds-super-navigation-background: var(--zds-color-grey-25);
	--zds-super-navigation-font-size: var(--zds-font-size-md);
	--zds-super-navigation-link-color: var(--zds-color-primary);
	--zds-super-navigation-link-color-hover: var(--zds-super-navigation-link-color);
	--zds-pagination-background-active: var(--zds-color-accent-01);
	--zds-pagination-border-radius: var(--zds-shape-radius-xl);
	--zds-pagination-color: var(--zds-text-color-base);
	--zds-pagination-color-active: var(--zds-color-accent-01-foreground);
	--zds-pagination-font-weight: bold;
	--zds-pagination-inset-x: .75rem;
	--zds-pagination-inset-y: .5rem;
	--zds-pagination-text-decoration: none;
	--zds-pagination-text-decoration-hover: underline;
	--zds-pane-background: var(--zds-color-white);
	--zds-pane-border-color: var(--zds-color-grey-100);
	--zds-pane-border-color-hover: var(--zds-color-grey-200);
	--zds-pane-border-radius: var(--zds-shape-radius-lg);
	--zds-pane-border-width: 1px;
	--zds-pane-box-shadow: var(--zds-shadow-softbox);
	--zds-pane-box-shadow-hover: 0 5px 16px color-mix(in srgb, #263238 15%, transparent);
	--zds-pane-inset-x: var(--zds-space-6);
	--zds-pane-inset-y: var(--zds-space-6);
	--zds-popout-background: var(--zds-color-white);
	--zds-popout-border-color: var(--zds-card-border-color);
	--zds-popout-border-width: var(--zds-card-border-width);
	--zds-popout-border-radius: var(--zds-card-border-radius);
	--zds-popout-box-shadow: var(--zds-shadow-light-sm);
	--zds-popout-inset: var(--zds-space-6);
	--zds-progress-arrow-arrow-width: 20px;
	--zds-progress-arrow-background: var(--zds-color-info);
	--zds-progress-arrow-color: var(--zds-color-info-foreground);
	--zds-progress-arrow-padding: var(--zds-space-4);
	--zds-progress-bar-color: var(--zds-color-primary);
	--zds-progress-bar-background: rgba(0, 0, 0, 0.1);
	--zds-progress-circle-color: var(--zds-color-primary);
	--zds-radio-panel-background: var(--zds-color-grey-50);
	--zds-radio-panel-border-color: var(--zds-color-grey-75);
	--zds-radio-panel-color: var(--zds-text-color-base);
	--zds-radio-panel-inset: var(--zds-space-0_5);
	--zds-radio-panel-item-background-hover: rgb(255 255 255 / 70%);
	--zds-radio-panel-item-inset-x: var(--zds-space-4);
	--zds-radio-panel-item-inset-y: var(--zds-space-1_5);
	--zds-radio-inset-x: 0px;
	--zds-radio-inset-y: 6px;
	--zds-range-slider-selected-background: var(--zds-input-background-on);
	--zds-range-slider-input-width: 128px;
	--zds-select-background: var(--zds-color-white);
	--zds-select-input-max-height: 160px;
	--zds-select-list-footer-inset-x: var(--zds-space-2);
	--zds-select-list-footer-inset-y: var(--zds-space-2);
	--zds-select-list-header-inset-x: var(--zds-space-2);
	--zds-select-list-header-inset-y: var(--zds-space-2);
	--zds-selectable-preset-filled-background-active: var(--zds-color-primary);
	--zds-selectable-preset-filled-background-active-hover: var(--zds-color-primary-light);
	--zds-selectable-preset-filled-background-hover: var(--zds-color-primary-subtle);
	--zds-selectable-preset-filled-color-active: var(--zds-color-primary-foreground);
	--zds-selectable-preset-subtle-background-active: var(--zds-color-primary-subtle);
	--zds-selectable-preset-subtle-color-active: var(--zds-color-primary-subtle-foreground);
	--zds-selectable-border-radius: var(--zds-shape-radius-md);
	--zds-selectable-border-width: 1px;
	--zds-selectable-inset-x: var(--zds-space-3);
	--zds-selectable-inset-y: var(--zds-space-4);
	--zds-selectable-border-color-hover: var(--zds-selectable-preset-filled-background-active);
	--zds-side-sheet-box-shadow: var(--zds-shadow-light-sm);
	--zds-side-sheet-inset-x: var(--zds-space-6);
	--zds-side-sheet-inset-y: var(--zds-space-6);
	--zds-side-sheet-border: 1px solid #cfd8dc;
	--zds-skeleton-background: var(--zds-color-grey-50);
	--zds-stepper-indicator-active-background: var(--zds-color-primary);
	--zds-stepper-indicator-active-border-color: transparent;
	--zds-stepper-indicator-active-color: var(--zds-color-primary-foreground);
	--zds-stepper-indicator-complete-background: var(--zds-color-success-subtle);
	--zds-stepper-indicator-complete-border-color: transparent;
	--zds-stepper-indicator-complete-color: var(--zds-color-success);
	--zds-stepper-indicator-incomplete-background: transparent;
	--zds-stepper-indicator-incomplete-border-color: var(--zds-stepper-indicator-active-background);
	--zds-stepper-indicator-incomplete-color: var(--zds-stepper-indicator-active-background);
	--zds-stepper-indicator-unvisited-background: transparent;
	--zds-stepper-indicator-unvisited-border-color: var(--zds-text-color-muted);
	--zds-stepper-indicator-unvisited-color: var(--zds-text-color-muted);
	--zds-switch-inset-x: 0px;
	--zds-switch-inset-y: 10px;
	--zds-switch-box-shadow-off: 0 0 0 0.25rem #b0bec533;
	--zds-tabs-line-color: var(--zds-color-grey-100);
	--zds-tabs-variant-solid-background: var(--zds-color-grey-50);
	--zds-tabs-variant-solid-border-color: var(--zds-color-grey-75);
	--zds-tab-background: transparent;
	--zds-tab-background-hover: var(--zds-color-grey-50);
	--zds-tab-border: none;
	--zds-tab-border-hover: none;
	--zds-tab-box-shadow-hover: none;
	--zds-tab-border-radius: var(--zds-button-border-radius);
	--zds-tab-color: var(--zds-text-color-base);
	--zds-tab-color-hover: var(--zds-tab-color);
	--zds-tab-color-active: var(--zds-tab-color);
	--zds-tab-font-weight-active: 600;
	--zds-tab-max-width: 200px;
	--zds-tab-inset-x: var(--zds-space-4);
	--zds-tab-inset-y: var(--zds-space-2);
	--zds-tab-variant-underlined-indicator-background: var(--zds-color-primary);
	--zds-tab-variant-underlined-indicator-spacing: var(--zds-space-1_5);
	--zds-tab-variant-solid-background-hover: rgb(255 255 255 / 70%);
	--zds-tab-variant-solid-inset-x: var(--zds-space-4);
	--zds-tab-variant-solid-inset-y: var(--zds-space-1_5);
	--zds-textarea-border-radius: var(--zds-input-border-radius);
	--zds-toast-max-width: none;
	--zds-toast-bottom-offset: var(--zds-space-3);
	--zds-toast-border-radius: var(--zds-shape-radius-sm);
}

/*
 * Breakpoint XS
 */
@media (min-width: 0) and (max-width: 599.98px) { :root {
	--zds-pane-inset-x: var(--zds-space-4);
	--zds-pane-inset-y: var(--zds-space-4);
	--zds-progress-arrow-padding: 12px 8px;
	--zds-font-size-xxs: 0.6875rem;
	--zds-font-size-xs: 0.8125rem;
	--zds-font-size-sm: 0.875rem;
	--zds-font-size-md: 1rem;
	--zds-font-size-lg: 1.125rem;
	--zds-font-size-xl: 1.25rem;
	--zds-font-size-xxl: 1.4375rem;
	--zds-font-size-xxxl: 1.625rem;
	--zds-font-size-xxxxl: 1.8125rem;
	--zds-font-size-base: 1rem;
} }

/*
 * Breakpoint SM
 */
@media (min-width: 600px) and (max-width: 839.98px) { :root {
	--zds-pane-inset-x: var(--zds-space-4);
	--zds-pane-inset-y: var(--zds-space-4);
	--zds-progress-arrow-padding: 12px 8px;
} }

/*
 * Breakpoint MD
 */
@media (min-width: 840px) and (max-width: 1279.98px) { :root {
	--zds-card-body-inset: var(--zds-space-4);
	--zds-modal-inset: var(--zds-space-6);
	--zds-grid-gutter-x: var(--zds-space-8);
	--zds-grid-gutter-y: var(--zds-space-8);
} }

/*
 * Breakpoint LG
 */
@media (min-width: 1280px) and (max-width: 1499.98px) { :root {
	--zds-card-body-inset: var(--zds-space-6);
	--zds-modal-inset: var(--zds-space-8);
	--zds-grid-gutter-x: var(--zds-space-8);
	--zds-grid-gutter-y: var(--zds-space-8);
} }

/*
 * Breakpoint XL
 */
@media (min-width: 1500px) { :root {
	--zds-card-body-inset: var(--zds-space-8);
	--zds-modal-inset: var(--zds-space-8);
	--zds-grid-gutter-x: var(--zds-space-12);
	--zds-grid-gutter-y: var(--zds-space-12);
} }