/* Generated by scripts/build.mjs from tokens/*.json. Do not edit; change the Figma variables and export. */

:root,
[data-theme],
[data-brand] {
  --accordion-border-radius-default: var(--border-radius-sm);
  --accordion-border-width-default: var(--border-width-default);
  --accordion-color-background-default: var(--color-background-default);
  --accordion-color-border-default: var(--color-border-subtle);
  --accordion-color-border-hover: var(--color-border-default);
  --accordion-color-content-active: var(--color-content-emphasized);
  --accordion-color-content-default: var(--color-content-subtle);
  --accordion-color-content-disabled: var(--color-content-disabled);
  --accordion-color-content-focus: var(--color-content-emphasized);
  --accordion-color-content-hover: var(--color-content-emphasized);
  --accordion-spacing-heading-gap: var(--spacing-gap-sm);
  --accordion-spacing-heading-padding-x: var(--spacing-padding-lg);
  --accordion-spacing-heading-padding-y: var(--spacing-padding-md);
  --accordion-spacing-panel-gap: var(--spacing-gap-lg);
  --accordion-spacing-panel-padding-x: var(--spacing-padding-lg);
  --accordion-spacing-panel-padding-y: var(--spacing-padding-lg);
  --alert-border-radius-default: var(--border-radius-xsm);
  --alert-border-width-default: var(--border-width-default);
  --alert-color-error-background-default: var(--color-background-utility-error);
  --alert-color-error-border-default: var(--color-border-utility-error);
  --alert-color-error-content-default: var(--color-content-utility-error);
  --alert-color-info-background-default: var(--color-background-utility-info);
  --alert-color-info-border-default: var(--color-border-utility-info);
  --alert-color-info-content-default: var(--color-content-utility-info);
  --alert-color-success-background-default: var(--color-background-utility-success);
  --alert-color-success-border-default: var(--color-border-utility-success);
  --alert-color-success-content-default: var(--color-content-utility-success);
  --alert-color-warning-background-default: var(--color-background-utility-warning);
  --alert-color-warning-border-default: var(--color-border-utility-warning);
  --alert-color-warning-content-default: var(--color-content-utility-warning);
  --alert-spacing-gap: var(--spacing-gap-sm);
  --alert-spacing-min-height: var(--spacing-48);
  --alert-spacing-padding-x: var(--spacing-padding-md);
  --alert-spacing-padding-y: var(--spacing-padding-sm);
  --border-radius-lg: 1.5rem;
  --border-radius-md: 1rem;
  --border-radius-none: 0;
  --border-radius-round: 624.9375rem;
  --border-radius-sm: 0.5rem;
  --border-radius-xlg: 3rem;
  --border-radius-xsm: 0.25rem;
  --border-radius-xxsm: 0.125rem;
  --border-width-default: 0.0625rem;
  --border-width-lg: 0.5rem;
  --border-width-md: 0.25rem;
  --border-width-sm: 0.125rem;
  --button-border-radius-default: var(--border-radius-xsm);
  --button-border-radius-focus: var(--button-border-radius-default);
  --button-border-radius-hover: var(--button-border-radius-default);
  --button-border-radius-lg: var(--border-radius-lg);
  --button-border-radius-md: var(--border-radius-md);
  --button-border-radius-round: var(--border-radius-round);
  --button-border-radius-sm: var(--border-radius-sm);
  --button-border-radius-xlg: var(--border-radius-xlg);
  --button-border-width-default: var(--border-width-default);
  --button-border-width-hover: var(--border-width-default);
  --button-color-danger-background-default: var(--color-background-default);
  --button-color-danger-background-focus: var(--color-background-utility-error);
  --button-color-danger-background-hover: var(--color-background-utility-error);
  --button-color-danger-border-default: var(--color-border-utility-error);
  --button-color-danger-border-focus: var(--color-border-utility-error);
  --button-color-danger-border-hover: var(--color-content-utility-error);
  --button-color-danger-content-default: var(--color-content-utility-error);
  --button-color-danger-content-focus: var(--color-content-utility-error);
  --button-color-danger-content-hover: var(--color-content-utility-error);
  --button-color-disabled-background-default: var(--color-background-disabled);
  --button-color-disabled-border-default: var(--color-border-disabled);
  --button-color-disabled-content-default: var(--color-content-disabled);
  --button-color-outline-background-default: var(--color-background-default);
  --button-color-outline-background-disabled: var(--button-color-disabled-background-default);
  --button-color-outline-background-focus: var(--color-background-subtle);
  --button-color-outline-background-hover: var(--color-background-subtle);
  --button-color-outline-border-default: var(--color-border-brand);
  --button-color-outline-border-disabled: var(--button-color-disabled-border-default);
  --button-color-outline-border-focus: var(--color-border-brand-hover);
  --button-color-outline-border-hover: var(--color-border-brand-hover);
  --button-color-outline-content-default: var(--color-content-brand);
  --button-color-outline-content-disabled: var(--button-color-disabled-content-default);
  --button-color-outline-content-focus: var(--color-content-brand-hover);
  --button-color-outline-content-hover: var(--color-content-brand-hover);
  --button-color-primary-background-default: var(--color-background-brand);
  --button-color-primary-background-disabled: var(--button-color-disabled-background-default);
  --button-color-primary-background-focus: var(--color-background-brand-hover);
  --button-color-primary-background-hover: var(--color-background-brand-hover);
  --button-color-primary-border-default: var(--color-border-brand);
  --button-color-primary-border-disabled: var(--button-color-disabled-border-default);
  --button-color-primary-border-focus: var(--color-border-brand-hover);
  --button-color-primary-border-hover: var(--color-border-brand-hover);
  --button-color-primary-content-default: var(--color-content-knockout);
  --button-color-primary-content-disabled: var(--button-color-disabled-content-default);
  --button-color-primary-content-focus: var(--color-content-knockout);
  --button-color-primary-content-hover: var(--color-content-knockout);
  --button-color-quiet-background-default: var(--color-background-default);
  --button-color-quiet-background-disabled: var(--button-color-disabled-background-default);
  --button-color-quiet-background-focus: var(--color-background-default);
  --button-color-quiet-background-hover: var(--color-background-subtle);
  --button-color-quiet-border-default: var(--color-border-brand);
  --button-color-quiet-border-disabled: var(--button-color-disabled-border-default);
  --button-color-quiet-border-focus: var(--color-border-brand-hover);
  --button-color-quiet-border-hover: var(--color-border-brand-hover);
  --button-color-quiet-content-default: var(--color-content-brand);
  --button-color-quiet-content-disabled: var(--button-color-disabled-content-default);
  --button-color-quiet-content-focus: var(--color-content-brand);
  --button-color-quiet-content-hover: var(--color-content-brand-hover);
  --button-focus-ring-inner-shadow-blur: var(--spacing-0);
  --button-focus-ring-inner-shadow-inner-shadow: var(--color-background-default);
  --button-focus-ring-inner-shadow-spread: var(--spacing-2);
  --button-focus-ring-inner-shadow-x: var(--spacing-0);
  --button-focus-ring-inner-shadow-y: var(--spacing-0);
  --button-focus-ring-outer-shadow-blur: var(--spacing-0);
  --button-focus-ring-outer-shadow-outer-shadow: var(--color-border-focus);
  --button-focus-ring-outer-shadow-spread: var(--spacing-4);
  --button-focus-ring-outer-shadow-x: var(--spacing-0);
  --button-focus-ring-outer-shadow-y: var(--spacing-0);
  --button-spacing-default-gap: var(--spacing-gap-sm);
  --button-spacing-default-min-height: var(--spacing-48);
  --button-spacing-default-padding-x: var(--spacing-padding-md);
  --button-spacing-default-padding-y: var(--spacing-padding-sm);
  --button-spacing-groups-gap: var(--container-gutter);
  --button-spacing-groups-padding-y: var(--spacing-padding-md);
  --button-typography-font-family: var(--typography-font-family-base);
  --button-typography-font-size: var(--typography-font-size-14);
  --button-typography-font-weight: var(--typography-font-weight-500);
  --button-typography-letter-spacing: var(--typography-letter-spacing-half);
  --button-typography-line-height: var(--typography-line-height-20);
  --button-typography-text-transform: var(--typography-text-transform-capitalize);
  --chip-border-radius-default: var(--border-radius-round);
  --chip-border-width-default: var(--border-width-default);
  --chip-color-default-background-default: var(--color-background-default);
  --chip-color-default-border-default: var(--color-border-default);
  --chip-color-default-content-default: var(--color-content-default);
  --chip-color-draft-background-default: var(--color-background-utility-info);
  --chip-color-draft-border-default: var(--color-border-utility-info);
  --chip-color-draft-content-default: var(--color-content-utility-info);
  --chip-color-error-background-default: var(--color-background-utility-error);
  --chip-color-error-border-default: var(--color-border-utility-error);
  --chip-color-error-content-default: var(--color-content-utility-error);
  --chip-color-partial-background-default: var(--color-background-default);
  --chip-color-partial-border-default: var(--color-border-default);
  --chip-color-partial-content-default: var(--color-content-default);
  --chip-color-sent-background-default: var(--color-background-default);
  --chip-color-sent-border-default: var(--color-border-default);
  --chip-color-sent-content-default: var(--color-content-default);
  --chip-color-success-background-default: var(--color-background-utility-success);
  --chip-color-success-border-default: var(--color-border-utility-success);
  --chip-color-success-content-default: var(--color-content-utility-success);
  --chip-spacing-default-padding-x: var(--spacing-padding-xsm);
  --chip-spacing-default-padding-y: var(--spacing-padding-xxsm);
  --chip-spacing-groups-gap: var(--spacing-gap-xsm);
  --color-background-brand: var(--color-role-light-background-brand);
  --color-background-brand-hover: var(--color-role-light-background-brand-hover);
  --color-background-default: var(--color-role-light-background-default);
  --color-background-disabled: #f3f4f4;
  --color-background-highlight: var(--color-role-light-background-highlight);
  --color-background-knockout: var(--color-role-light-background-knockout);
  --color-background-knockout-hover: #000000;
  --color-background-knockout-translucent: var(--color-role-light-background-knockout-translucent);
  --color-background-raised: var(--color-role-light-background-raised);
  --color-background-selected: var(--color-role-light-background-selected);
  --color-background-subtle: var(--color-role-light-background-subtle);
  --color-background-subtle-hover: #d9d9d9;
  --color-background-surface: #ffffff;
  --color-background-utility-error: var(--color-role-light-background-utility-error);
  --color-background-utility-error-knockout: #b82f30;
  --color-background-utility-info: #eceefc;
  --color-background-utility-info-knockout: #4555d3;
  --color-background-utility-success: var(--color-role-light-background-utility-success);
  --color-background-utility-success-knockout: #0b7058;
  --color-background-utility-warning: var(--color-role-light-background-utility-warning);
  --color-background-utility-warning-knockout: #8a5801;
  --color-border-brand: var(--color-role-light-border-brand);
  --color-border-brand-hover: var(--color-role-light-border-brand-hover);
  --color-border-default: var(--color-role-light-border-default);
  --color-border-disabled: #6f7078;
  --color-border-focus: var(--color-role-light-border-focus);
  --color-border-hover: var(--color-role-light-border-hover);
  --color-border-knockout: #ffffffcc;
  --color-border-knockout-hover: #ffffff;
  --color-border-selected: var(--color-role-light-border-selected);
  --color-border-strong: var(--color-role-light-border-strong);
  --color-border-subtle: var(--color-role-light-border-subtle);
  --color-border-subtle-hover: #8c8f9b;
  --color-border-utility-error: var(--color-role-light-border-utility-error);
  --color-border-utility-info: #34409e;
  --color-border-utility-success: var(--color-role-light-border-utility-success);
  --color-border-utility-warning: var(--color-role-light-border-utility-warning);
  --color-content-accent: var(--color-role-light-content-accent);
  --color-content-body: var(--color-role-light-content-body);
  --color-content-brand: var(--color-role-light-content-brand);
  --color-content-brand-hover: var(--color-role-light-content-brand-hover);
  --color-content-brand-knockout: var(--color-content-knockout);
  --color-content-default: var(--color-role-light-content-default);
  --color-content-disabled: var(--color-role-light-content-disabled);
  --color-content-emphasized: var(--color-role-light-content-emphasized);
  --color-content-eyebrow: var(--color-content-brand);
  --color-content-eyebrow-knockout: var(--color-content-knockout);
  --color-content-headline: var(--color-role-light-content-headline);
  --color-content-headline-brand: var(--color-role-light-content-headline-brand);
  --color-content-headline-knockout: var(--color-content-knockout);
  --color-content-knockout: var(--color-role-light-content-knockout);
  --color-content-link: var(--color-role-light-content-link);
  --color-content-link-hover: var(--color-role-light-content-link-hover);
  --color-content-subtitle: var(--color-role-light-content-subtitle);
  --color-content-subtitle-knockout: var(--color-role-light-content-subtitle-knockout);
  --color-content-subtle: var(--color-role-light-content-subtle);
  --color-content-utility-error: var(--color-role-light-content-utility-error);
  --color-content-utility-error-knockout: var(--color-content-knockout);
  --color-content-utility-info: #4555d3;
  --color-content-utility-info-knockout: var(--color-content-knockout);
  --color-content-utility-success: var(--color-role-light-content-utility-success);
  --color-content-utility-success-knockout: var(--color-content-knockout);
  --color-content-utility-warning: var(--color-role-light-content-utility-warning);
  --color-content-utility-warning-knockout: var(--color-content-knockout);
  --color-content-xray-atom: var(--color-role-light-content-xray-atom);
  --color-content-xray-molecule: var(--color-role-light-content-xray-molecule);
  --color-content-xray-organism: var(--color-role-light-content-xray-organism);
  --color-content-xray-template: var(--color-role-light-content-xray-template);
  --color-elevation-shadow: #00000066;
  --elevation-lg-blur: 3rem;
  --elevation-lg-color: var(--color-elevation-shadow);
  --elevation-lg-spread: 0;
  --elevation-lg-x: 0;
  --elevation-lg-y: 1.5rem;
  --elevation-md-blur: 2rem;
  --elevation-md-color: var(--color-elevation-shadow);
  --elevation-md-spread: 0;
  --elevation-md-x: 0;
  --elevation-md-y: 1rem;
  --elevation-sm-blur: 1rem;
  --elevation-sm-color: var(--color-elevation-shadow);
  --elevation-sm-spread: 0;
  --elevation-sm-x: 0;
  --elevation-sm-y: 0.5rem;
  --elevation-surface-blur: 0.125rem;
  --elevation-surface-color: var(--color-elevation-shadow);
  --elevation-surface-spread: 0;
  --elevation-surface-x: 0;
  --elevation-surface-y: 0.0625rem;
  --elevation-xlg-blur: 6rem;
  --elevation-xlg-color: var(--color-elevation-shadow);
  --elevation-xlg-spread: 0;
  --elevation-xlg-x: 0;
  --elevation-xlg-y: 3rem;
  --elevation-xsm-blur: 0.5rem;
  --elevation-xsm-color: var(--color-elevation-shadow);
  --elevation-xsm-spread: 0;
  --elevation-xsm-x: 0;
  --elevation-xsm-y: 0.25rem;
  --elevation-xxsm-blur: 0.25rem;
  --elevation-xxsm-color: var(--color-elevation-shadow);
  --elevation-xxsm-spread: 0;
  --elevation-xxsm-x: 0;
  --elevation-xxsm-y: 0.125rem;
  --field-border-radius-default: var(--border-radius-xsm);
  --field-border-radius-read-only: var(--border-radius-none);
  --field-border-radius-search: var(--border-radius-round);
  --field-border-width-default: var(--border-width-default);
  --field-color-background-active: var(--color-background-default);
  --field-color-background-default: var(--color-background-default);
  --field-color-background-disabled: var(--color-background-subtle);
  --field-color-background-focus: var(--color-background-default);
  --field-color-background-hover: var(--color-background-default);
  --field-color-background-selected: var(--color-background-selected);
  --field-color-border-default: var(--color-border-default);
  --field-color-border-disabled: var(--color-border-disabled);
  --field-color-border-error: var(--color-border-utility-error);
  --field-color-border-focus: var(--color-border-focus);
  --field-color-border-hover: var(--color-border-hover);
  --field-color-border-selected: var(--color-border-selected);
  --field-color-border-success: var(--color-border-utility-success);
  --field-color-content-default: var(--color-content-subtle);
  --field-color-content-disabled: var(--color-content-disabled);
  --field-color-content-error: var(--color-content-utility-error);
  --field-color-content-focus: var(--color-content-default);
  --field-color-content-hover: var(--color-content-default);
  --field-color-content-label: var(--color-content-headline);
  --field-color-content-selected: var(--color-content-default);
  --field-color-content-success: var(--color-content-utility-success);
  --field-focus-ring-inner-shadow-blur: var(--spacing-0);
  --field-focus-ring-inner-shadow-inner-shadow: var(--field-color-background-default);
  --field-focus-ring-inner-shadow-spread: var(--spacing-2);
  --field-focus-ring-inner-shadow-x: var(--spacing-0);
  --field-focus-ring-inner-shadow-y: var(--spacing-0);
  --field-focus-ring-outer-shadow-blur: var(--spacing-0);
  --field-focus-ring-outer-shadow-outer-shadow: var(--color-border-focus);
  --field-focus-ring-outer-shadow-spread: var(--spacing-4);
  --field-focus-ring-outer-shadow-x: var(--spacing-0);
  --field-focus-ring-outer-shadow-y: var(--spacing-0);
  --field-spacing-gap: var(--spacing-gap-sm);
  --field-spacing-min-height: var(--spacing-48);
  --field-spacing-padding-x: var(--spacing-padding-md);
  --field-spacing-padding-y: var(--spacing-padding-sm);
  --field-typography-font-family: var(--typography-font-family-base);
  --field-typography-font-size: var(--typography-font-size-16);
  --field-typography-font-weight: var(--typography-font-weight-500);
  --field-typography-letter-spacing: var(--typography-letter-spacing-0);
  --field-typography-line-height: var(--typography-line-height-24);
  --field-typography-text-transform: var(--typography-text-transform-none);
  --hyperlink-color-default: var(--color-content-link);
  --hyperlink-color-hover: var(--color-content-link-hover);
  --motion-blur: 0.125rem;
  --motion-color: var(--color-elevation-shadow);
  --motion-spread: 0;
  --motion-x: 0;
  --motion-y: 0.0625rem;
  --navbar-border-width-default: var(--border-width-default);
  --navbar-color-background-default: var(--color-background-default);
  --navbar-color-border-color-default: var(--color-border-subtle);
  --navbar-color-border-width-default: var(--border-width-default);
  --navbar-color-content-active: var(--color-content-emphasized);
  --navbar-color-content-default: var(--color-content-default);
  --navbar-color-content-disabled: var(--color-content-disabled);
  --navbar-color-content-focus: var(--color-content-emphasized);
  --navbar-color-content-hover: var(--color-content-emphasized);
  --navbar-spacing-nav-links-gap: var(--spacing-gap-xlg);
  --navbar-spacing-nav-links-mobile-padding-y: var(--spacing-padding-xlg);
  --navbar-spacing-padding-x: var(--spacing-padding-lg);
  --navbar-spacing-padding-y: var(--spacing-padding-md);
  --section-spacing-gap: var(--spacing-gap-lg);
  --section-spacing-padding-x: var(--spacing-padding-xlg);
  --section-spacing-padding-y: var(--spacing-padding-xlg);
  --spacing-0: 0;
  --spacing-12: 0.75rem;
  --spacing-128: 8rem;
  --spacing-16: 1rem;
  --spacing-2: 0.125rem;
  --spacing-24: 1.5rem;
  --spacing-32: 2rem;
  --spacing-4: 0.25rem;
  --spacing-40: 2.5rem;
  --spacing-48: 3rem;
  --spacing-64: 4rem;
  --spacing-8: 0.5rem;
  --spacing-80: 5rem;
  --spacing-96: 6rem;
  --spacing-gap-lg: var(--spacing-24);
  --spacing-gap-md: var(--spacing-16);
  --spacing-gap-none: var(--spacing-0);
  --spacing-gap-sm: var(--spacing-8);
  --spacing-gap-xlg: var(--spacing-48);
  --spacing-gap-xsm: var(--spacing-4);
  --spacing-gap-xxsm: var(--spacing-2);
  --spacing-padding-lg: var(--spacing-24);
  --spacing-padding-md: var(--spacing-16);
  --spacing-padding-none: var(--spacing-0);
  --spacing-padding-sm: var(--spacing-8);
  --spacing-padding-xlg: var(--spacing-48);
  --spacing-padding-xsm: var(--spacing-4);
  --spacing-padding-xxsm: var(--spacing-2);
  --typography-font-family-alex-brush: "Alex Brush", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif;
  --typography-font-family-fraunces: "Fraunces 72pt SuperSoft", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif;
  --typography-font-family-helvetica: "Helvetica", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --typography-font-family-inter: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif;
  --typography-font-family-libre: "Libre Franklin", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif;
  --typography-font-size-104: 6.5rem;
  --typography-font-size-12: 0.75rem;
  --typography-font-size-14: 0.875rem;
  --typography-font-size-16: 1rem;
  --typography-font-size-18: 1.125rem;
  --typography-font-size-20: 1.25rem;
  --typography-font-size-24: 1.5rem;
  --typography-font-size-28: 1.75rem;
  --typography-font-size-32: 2rem;
  --typography-font-size-40: 2.5rem;
  --typography-font-size-48: 3rem;
  --typography-font-size-56: 3.5rem;
  --typography-font-size-64: 4rem;
  --typography-font-size-72: 4.5rem;
  --typography-font-size-80: 5rem;
  --typography-font-size-88: 5.5rem;
  --typography-font-size-96: 6rem;
  --typography-font-weight-400: 400;
  --typography-font-weight-500: 500;
  --typography-font-weight-600: 600;
  --typography-font-weight-700: 700;
  --typography-font-weight-800: 800;
  --typography-font-weight-900: 900;
  --typography-font-weight-bold: Bold;
  --typography-font-weight-extrabold: Extra Bold;
  --typography-font-weight-medium: Medium;
  --typography-font-weight-regular: Regular;
  --typography-font-weight-semi: Semi Bold;
  --typography-letter-spacing-0: 0;
  --typography-letter-spacing-1: 0.0625rem;
  --typography-letter-spacing-1-half: 0.0938rem;
  --typography-letter-spacing-2: 0.125rem;
  --typography-letter-spacing-half: 0.0313rem;
  --typography-letter-spacing-minus-1: -0.0625rem;
  --typography-letter-spacing-minus-1-half: -0.0938rem;
  --typography-letter-spacing-minus-2: -0.125rem;
  --typography-letter-spacing-minus-half: -0.0313rem;
  --typography-line-height-104: 6.5rem;
  --typography-line-height-112: 7rem;
  --typography-line-height-16: 1rem;
  --typography-line-height-20: 1.25rem;
  --typography-line-height-24: 1.5rem;
  --typography-line-height-28: 1.75rem;
  --typography-line-height-32: 2rem;
  --typography-line-height-36: 2.25rem;
  --typography-line-height-40: 2.5rem;
  --typography-line-height-48: 3rem;
  --typography-line-height-56: 3.5rem;
  --typography-line-height-64: 4rem;
  --typography-line-height-72: 4.5rem;
  --typography-line-height-80: 5rem;
  --typography-line-height-88: 5.5rem;
  --typography-line-height-96: 6rem;
  --typography-text-transform-capitalize: capitalize;
  --typography-text-transform-lowercase: lowercase;
  --typography-text-transform-none: none;
  --typography-text-transform-uppercase: uppercase;
}

:root,
[data-brand] {
  --color-brand-default: var(--color-brand-primary-600);
  --color-brand-highlight: #3366ff66;
  --color-brand-hover: var(--color-brand-primary-550);
  --color-brand-primary-100: #d6e4ff;
  --color-brand-primary-200: #adc8ff;
  --color-brand-primary-300: #84a9ff;
  --color-brand-primary-400: #6690ff;
  --color-brand-primary-500: #3366ff;
  --color-brand-primary-550: #2b59eb;
  --color-brand-primary-600: #254edb;
  --color-brand-primary-700: #1939b7;
  --color-brand-primary-800: #102693;
  --color-brand-primary-900: #091a7a;
  --color-brand-secondary-100: #d3ecf5;
  --color-brand-secondary-200: #aad6eb;
  --color-brand-secondary-300: #73a6c4;
  --color-brand-secondary-400: #436c8a;
  --color-brand-secondary-500: #13293d;
  --color-brand-secondary-600: #0d2034;
  --color-brand-secondary-700: #09172b;
  --color-brand-secondary-800: #061023;
  --color-brand-secondary-900: #030b1d;
  --color-brand-tertiary-100: #d6e4ff;
  --color-brand-tertiary-200: #adc8ff;
  --color-brand-tertiary-300: #84a9ff;
  --color-brand-tertiary-400: #6690ff;
  --color-brand-tertiary-500: #3366ff;
  --color-brand-tertiary-600: #254edb;
  --color-brand-tertiary-700: #1939b7;
  --color-brand-tertiary-800: #102693;
  --color-brand-tertiary-900: #091a7a;
  --color-role-dark-background-brand: var(--color-brand-default);
  --color-role-dark-background-brand-hover: var(--color-brand-hover);
  --color-role-dark-background-default: #0d0f16;
  --color-role-dark-background-highlight: var(--color-brand-highlight);
  --color-role-dark-background-knockout: #42454e;
  --color-role-dark-background-knockout-translucent: #000000cc;
  --color-role-dark-background-raised: #ffffff1a;
  --color-role-dark-background-selected: var(--color-brand-secondary-500);
  --color-role-dark-background-subtle: #161925;
  --color-role-dark-background-surface: #0d0f16;
  --color-role-dark-background-utility-error: #390e0e;
  --color-role-dark-background-utility-success: #03211a;
  --color-role-dark-background-utility-warning: #2c1900;
  --color-role-dark-border-brand: var(--color-brand-primary-400);
  --color-role-dark-border-brand-hover: var(--color-brand-primary-300);
  --color-role-dark-border-default: #6f7078;
  --color-role-dark-border-focus: var(--color-brand-primary-400);
  --color-role-dark-border-hover: var(--color-brand-secondary-400);
  --color-role-dark-border-selected: var(--color-brand-secondary-300);
  --color-role-dark-border-strong: #6f7078;
  --color-role-dark-border-subtle: #42454e;
  --color-role-dark-border-utility-error: #dd7c88;
  --color-role-dark-border-utility-success: #11ad86;
  --color-role-dark-border-utility-warning: #dbb305;
  --color-role-dark-content-accent: var(--color-brand-primary-400);
  --color-role-dark-content-body: #c5c6c9;
  --color-role-dark-content-brand: var(--color-brand-primary-400);
  --color-role-dark-content-brand-hover: var(--color-brand-primary-300);
  --color-role-dark-content-default: #c5c6c9;
  --color-role-dark-content-disabled: #61646b;
  --color-role-dark-content-emphasized: #f3f4f4;
  --color-role-dark-content-headline: #f3f4f4;
  --color-role-dark-content-headline-brand: var(--color-brand-primary-400);
  --color-role-dark-content-knockout: #f3f4f4;
  --color-role-dark-content-link: var(--color-brand-primary-400);
  --color-role-dark-content-link-hover: var(--color-brand-primary-300);
  --color-role-dark-content-subtitle: #c5c6c9;
  --color-role-dark-content-subtitle-knockout: #f3f4f4;
  --color-role-dark-content-subtle: #8c8f9b;
  --color-role-dark-content-utility-error: #efa2b2;
  --color-role-dark-content-utility-success: #5dc9af;
  --color-role-dark-content-utility-warning: #efd242;
  --color-role-dark-content-xray-atom: #abb3f0;
  --color-role-dark-content-xray-molecule: #d782c8;
  --color-role-dark-content-xray-organism: #5dc9af;
  --color-role-dark-content-xray-template: #efd242;
  --color-role-light-background-brand: var(--color-brand-default);
  --color-role-light-background-brand-hover: var(--color-brand-hover);
  --color-role-light-background-default: #ffffff;
  --color-role-light-background-highlight: var(--color-brand-highlight);
  --color-role-light-background-knockout: #252525;
  --color-role-light-background-knockout-translucent: #000000cc;
  --color-role-light-background-raised: #ffffff1a;
  --color-role-light-background-selected: var(--color-brand-secondary-200);
  --color-role-light-background-subtle: #f7f7f7;
  --color-role-light-background-utility-error: #fceaef;
  --color-role-light-background-utility-success: #dcf3ee;
  --color-role-light-background-utility-warning: #f9efbb;
  --color-role-light-border-brand: var(--color-brand-default);
  --color-role-light-border-brand-hover: var(--color-brand-hover);
  --color-role-light-border-default: #6f7078;
  --color-role-light-border-focus: var(--color-brand-default);
  --color-role-light-border-hover: var(--color-brand-secondary-400);
  --color-role-light-border-selected: var(--color-brand-secondary-500);
  --color-role-light-border-strong: #6f7078;
  --color-role-light-border-subtle: #c5c6c9;
  --color-role-light-border-utility-error: #8d2121;
  --color-role-light-border-utility-success: #085442;
  --color-role-light-border-utility-warning: #6d3f00;
  --color-role-light-content-accent: var(--color-brand-default);
  --color-role-light-content-body: #42454e;
  --color-role-light-content-brand: var(--color-brand-default);
  --color-role-light-content-brand-hover: var(--color-brand-hover);
  --color-role-light-content-default: #42454e;
  --color-role-light-content-disabled: #61646b;
  --color-role-light-content-emphasized: #0d0f16;
  --color-role-light-content-headline: #0d0f16;
  --color-role-light-content-headline-brand: var(--color-brand-default);
  --color-role-light-content-knockout: #f3f4f4;
  --color-role-light-content-link: var(--color-brand-default);
  --color-role-light-content-link-hover: var(--color-brand-hover);
  --color-role-light-content-subtitle: #42454e;
  --color-role-light-content-subtitle-knockout: #f3f4f4;
  --color-role-light-content-subtle: #6f7078;
  --color-role-light-content-utility-error: #b82f30;
  --color-role-light-content-utility-success: #0b7058;
  --color-role-light-content-utility-warning: #8a5801;
  --color-role-light-content-xray-atom: #4555d3;
  --color-role-light-content-xray-molecule: #be35a7;
  --color-role-light-content-xray-organism: #0b7058;
  --color-role-light-content-xray-template: #8a5801;
  --typography-body-default-font-family: var(--typography-body-lg-font-family);
  --typography-body-default-font-size: var(--typography-font-size-16);
  --typography-body-default-font-weight: var(--typography-font-weight-400);
  --typography-body-default-letter-spacing: var(--typography-letter-spacing-0);
  --typography-body-default-line-height: var(--typography-line-height-24);
  --typography-body-default-text-transform: var(--typography-text-transform-none);
  --typography-body-emphasized-font-family: var(--typography-body-lg-font-family);
  --typography-body-emphasized-font-size: var(--typography-body-default-font-size);
  --typography-body-emphasized-font-weight: var(--typography-font-weight-600);
  --typography-body-emphasized-letter-spacing: var(--typography-body-default-letter-spacing);
  --typography-body-emphasized-line-height: var(--typography-body-default-line-height);
  --typography-body-emphasized-text-transform: var(--typography-body-default-text-transform);
  --typography-body-lg-font-family: var(--typography-font-family-base);
  --typography-body-lg-font-size: var(--typography-font-size-20);
  --typography-body-lg-font-weight: var(--typography-font-weight-400);
  --typography-body-lg-letter-spacing: var(--typography-body-default-letter-spacing);
  --typography-body-lg-line-height: var(--typography-line-height-28);
  --typography-body-lg-text-transform: var(--typography-body-default-text-transform);
  --typography-body-sm-font-family: var(--typography-body-lg-font-family);
  --typography-body-sm-font-size: var(--typography-font-size-14);
  --typography-body-sm-font-weight: var(--typography-body-default-font-weight);
  --typography-body-sm-letter-spacing: var(--typography-body-default-letter-spacing);
  --typography-body-sm-line-height: var(--typography-line-height-20);
  --typography-body-sm-text-transform: var(--typography-body-default-text-transform);
  --typography-display-default-mobile-font-family: var(--typography-font-family-headline);
  --typography-display-default-mobile-font-size: var(--typography-font-size-48);
  --typography-display-default-mobile-font-weight: var(--typography-display-default-font-weight);
  --typography-display-default-mobile-letter-spacing: var(--typography-letter-spacing-minus-1-half);
  --typography-display-default-mobile-line-height: var(--typography-line-height-56);
  --typography-display-default-mobile-text-transform: var(--typography-text-transform-none);
  --typography-display-default-font-family: var(--typography-font-family-headline);
  --typography-display-default-font-size: var(--typography-font-size-72);
  --typography-display-default-font-weight: var(--typography-font-weight-900);
  --typography-display-default-letter-spacing: var(--typography-letter-spacing-minus-half);
  --typography-display-default-line-height: var(--typography-line-height-80);
  --typography-display-default-text-transform: var(--typography-text-transform-none);
  --typography-display-sm-mobile-font-family: var(--typography-font-family-headline);
  --typography-display-sm-mobile-font-size: var(--typography-font-size-32);
  --typography-display-sm-mobile-font-weight: var(--typography-display-sm-font-weight);
  --typography-display-sm-mobile-letter-spacing: var(--typography-letter-spacing-minus-1);
  --typography-display-sm-mobile-line-height: var(--typography-line-height-40);
  --typography-display-sm-mobile-text-transform: var(--typography-text-transform-none);
  --typography-display-sm-font-family: var(--typography-font-family-headline);
  --typography-display-sm-font-size: var(--typography-font-size-40);
  --typography-display-sm-font-weight: var(--typography-font-weight-700);
  --typography-display-sm-letter-spacing: var(--typography-letter-spacing-minus-1-half);
  --typography-display-sm-line-height: var(--typography-line-height-48);
  --typography-display-sm-text-transform: var(--typography-text-transform-none);
  --typography-font-family-accent: var(--typography-font-family-inter);
  --typography-font-family-base: var(--typography-font-family-inter);
  --typography-font-family-headline: var(--typography-font-family-inter);
  --typography-headline-default-mobile-font-family: var(--typography-font-family-headline);
  --typography-headline-default-mobile-font-size: var(--typography-font-size-32);
  --typography-headline-default-mobile-font-weight: var(--typography-headline-default-font-weight);
  --typography-headline-default-mobile-letter-spacing: var(--typography-letter-spacing-half);
  --typography-headline-default-mobile-line-height: var(--typography-line-height-40);
  --typography-headline-default-mobile-text-transform: var(--typography-text-transform-none);
  --typography-headline-default-font-family: var(--typography-font-family-headline);
  --typography-headline-default-font-size: var(--typography-font-size-40);
  --typography-headline-default-font-weight: var(--typography-font-weight-700);
  --typography-headline-default-letter-spacing: var(--typography-letter-spacing-half);
  --typography-headline-default-line-height: var(--typography-line-height-48);
  --typography-headline-default-text-transform: var(--typography-text-transform-none);
  --typography-headline-lg-mobile-font-family: var(--typography-font-family-headline);
  --typography-headline-lg-mobile-font-size: var(--typography-font-size-40);
  --typography-headline-lg-mobile-font-weight: var(--typography-headline-lg-font-weight);
  --typography-headline-lg-mobile-letter-spacing: var(--typography-letter-spacing-half);
  --typography-headline-lg-mobile-line-height: var(--typography-line-height-48);
  --typography-headline-lg-mobile-text-transform: var(--typography-text-transform-none);
  --typography-headline-lg-font-family: var(--typography-font-family-headline);
  --typography-headline-lg-font-size: var(--typography-font-size-48);
  --typography-headline-lg-font-weight: var(--typography-font-weight-700);
  --typography-headline-lg-letter-spacing: var(--typography-letter-spacing-half);
  --typography-headline-lg-line-height: var(--typography-line-height-56);
  --typography-headline-lg-text-transform: var(--typography-text-transform-none);
  --typography-headline-sm-mobile-font-family: var(--typography-font-family-headline);
  --typography-headline-sm-mobile-font-size: var(--typography-font-size-28);
  --typography-headline-sm-mobile-font-weight: var(--typography-headline-sm-font-weight);
  --typography-headline-sm-mobile-letter-spacing: var(--typography-letter-spacing-half);
  --typography-headline-sm-mobile-line-height: var(--typography-line-height-36);
  --typography-headline-sm-mobile-text-transform: var(--typography-text-transform-none);
  --typography-headline-sm-font-family: var(--typography-font-family-headline);
  --typography-headline-sm-font-size: var(--typography-font-size-32);
  --typography-headline-sm-font-weight: var(--typography-font-weight-700);
  --typography-headline-sm-letter-spacing: var(--typography-letter-spacing-half);
  --typography-headline-sm-line-height: var(--typography-line-height-40);
  --typography-headline-sm-text-transform: var(--typography-text-transform-none);
  --typography-label-default-font-family: var(--typography-font-family-base);
  --typography-label-default-font-size: var(--typography-font-size-16);
  --typography-label-default-font-weight: var(--typography-font-weight-500);
  --typography-label-default-letter-spacing: var(--typography-letter-spacing-0);
  --typography-label-default-line-height: var(--typography-line-height-24);
  --typography-label-default-text-transform: var(--typography-text-transform-none);
  --typography-label-lg-font-family: var(--typography-font-family-base);
  --typography-label-lg-font-size: var(--typography-font-size-20);
  --typography-label-lg-font-weight: var(--typography-font-weight-600);
  --typography-label-lg-letter-spacing: var(--typography-letter-spacing-0);
  --typography-label-lg-line-height: var(--typography-line-height-28);
  --typography-label-lg-text-transform: var(--typography-text-transform-none);
  --typography-label-sm-font-family: var(--typography-font-family-base);
  --typography-label-sm-font-size: var(--typography-font-size-14);
  --typography-label-sm-font-weight: var(--typography-font-weight-500);
  --typography-label-sm-letter-spacing: var(--typography-letter-spacing-0);
  --typography-label-sm-line-height: var(--typography-line-height-20);
  --typography-label-sm-text-transform: var(--typography-text-transform-none);
  --typography-meta-default-font-family: var(--typography-font-family-base);
  --typography-meta-default-font-size: var(--typography-font-size-14);
  --typography-meta-default-font-weight: var(--typography-font-weight-400);
  --typography-meta-default-letter-spacing: var(--typography-letter-spacing-0);
  --typography-meta-default-line-height: var(--typography-line-height-20);
  --typography-meta-default-text-transform: var(--typography-text-transform-none);
  --typography-meta-sm-font-family: var(--typography-meta-default-font-family);
  --typography-meta-sm-font-size: var(--typography-font-size-12);
  --typography-meta-sm-font-weight: var(--typography-meta-default-font-weight);
  --typography-meta-sm-letter-spacing: var(--typography-letter-spacing-half);
  --typography-meta-sm-line-height: var(--typography-line-height-16);
  --typography-meta-sm-text-transform: var(--typography-text-transform-uppercase);
  --typography-title-default-font-family: var(--typography-font-family-base);
  --typography-title-default-font-size: var(--typography-font-size-28);
  --typography-title-default-font-weight: var(--typography-font-weight-700);
  --typography-title-default-letter-spacing: var(--typography-letter-spacing-minus-half);
  --typography-title-default-line-height: var(--typography-line-height-36);
  --typography-title-default-text-transform: var(--typography-text-transform-none);
  --typography-title-lg-mobile-font-family: var(--typography-font-family-base);
  --typography-title-lg-mobile-font-size: var(--typography-font-size-28);
  --typography-title-lg-mobile-font-weight: var(--typography-title-lg-font-weight);
  --typography-title-lg-mobile-letter-spacing: var(--typography-letter-spacing-minus-half);
  --typography-title-lg-mobile-line-height: var(--typography-line-height-36);
  --typography-title-lg-mobile-text-transform: var(--typography-text-transform-none);
  --typography-title-lg-font-family: var(--typography-font-family-base);
  --typography-title-lg-font-size: var(--typography-font-size-32);
  --typography-title-lg-font-weight: var(--typography-font-weight-700);
  --typography-title-lg-letter-spacing: var(--typography-letter-spacing-minus-1);
  --typography-title-lg-line-height: var(--typography-line-height-40);
  --typography-title-lg-text-transform: var(--typography-text-transform-none);
  --typography-title-sm-font-family: var(--typography-font-family-base);
  --typography-title-sm-font-size: var(--typography-font-size-24);
  --typography-title-sm-font-weight: var(--typography-font-weight-500);
  --typography-title-sm-letter-spacing: var(--typography-letter-spacing-minus-half);
  --typography-title-sm-line-height: var(--typography-line-height-32);
  --typography-title-sm-text-transform: var(--typography-text-transform-none);
}

:root {
  color-scheme: light dark;
}

:root {
  --columns: 2;
  --container-gutter: var(--spacing-gap-md);
  --default-width: 23.4375rem;
  --max-width: 35rem;
  --min-width: 20rem;
  --section-gap: var(--spacing-gap-md);
  --section-padding: var(--spacing-16);
  --viewport: small;
}

@media (min-width: 35em) {
  :root {
    --columns: 8;
    --container-gutter: var(--spacing-gap-md);
    --default-width: 48rem;
    --max-width: 60rem;
    --min-width: 35rem;
    --section-gap: var(--spacing-gap-lg);
    --section-padding: var(--spacing-24);
    --viewport: medium;
  }
}

@media (min-width: 60em) {
  :root {
    --columns: 12;
    --container-gutter: var(--spacing-gap-lg);
    --default-width: 75rem;
    --max-width: 100rem;
    --min-width: 60rem;
    --section-gap: var(--spacing-gap-xlg);
    --section-padding: var(--spacing-48);
    --viewport: large;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  [data-brand]:not([data-theme="light"]) {
    color-scheme: dark;
    --color-background-brand: var(--color-role-dark-background-brand);
    --color-background-brand-hover: var(--color-role-dark-background-brand-hover);
    --color-background-default: var(--color-role-dark-background-default);
    --color-background-disabled: #161925;
    --color-background-highlight: var(--color-role-dark-background-highlight);
    --color-background-knockout: var(--color-role-dark-background-knockout);
    --color-background-knockout-translucent: var(--color-role-dark-background-knockout-translucent);
    --color-background-raised: var(--color-role-dark-background-raised);
    --color-background-selected: var(--color-role-dark-background-selected);
    --color-background-subtle: var(--color-role-dark-background-subtle);
    --color-background-subtle-hover: #42454e;
    --color-background-surface: var(--color-role-dark-background-surface);
    --color-background-utility-error: var(--color-role-dark-background-utility-error);
    --color-background-utility-info: #15193f;
    --color-background-utility-success: var(--color-role-dark-background-utility-success);
    --color-background-utility-warning: var(--color-role-dark-background-utility-warning);
    --color-border-brand: var(--color-role-dark-border-brand);
    --color-border-brand-hover: var(--color-role-dark-border-brand-hover);
    --color-border-default: var(--color-role-dark-border-default);
    --color-border-disabled: #42454e;
    --color-border-focus: var(--color-role-dark-border-focus);
    --color-border-hover: var(--color-role-dark-border-hover);
    --color-border-selected: var(--color-role-dark-border-selected);
    --color-border-strong: var(--color-role-dark-border-strong);
    --color-border-subtle: var(--color-role-dark-border-subtle);
    --color-border-subtle-hover: #6f7078;
    --color-border-utility-error: var(--color-role-dark-border-utility-error);
    --color-border-utility-info: #8792ea;
    --color-border-utility-success: var(--color-role-dark-border-utility-success);
    --color-border-utility-warning: var(--color-role-dark-border-utility-warning);
    --color-content-accent: var(--color-role-dark-content-accent);
    --color-content-body: var(--color-role-dark-content-body);
    --color-content-brand: var(--color-role-dark-content-brand);
    --color-content-brand-hover: var(--color-role-dark-content-brand-hover);
    --color-content-default: var(--color-role-dark-content-default);
    --color-content-disabled: var(--color-role-dark-content-disabled);
    --color-content-emphasized: var(--color-role-dark-content-emphasized);
    --color-content-headline: var(--color-role-dark-content-headline);
    --color-content-headline-brand: var(--color-role-dark-content-headline-brand);
    --color-content-knockout: var(--color-role-dark-content-knockout);
    --color-content-link: var(--color-role-dark-content-link);
    --color-content-link-hover: var(--color-role-dark-content-link-hover);
    --color-content-subtitle: var(--color-role-dark-content-subtitle);
    --color-content-subtitle-knockout: var(--color-role-dark-content-subtitle-knockout);
    --color-content-subtle: var(--color-role-dark-content-subtle);
    --color-content-utility-error: var(--color-role-dark-content-utility-error);
    --color-content-utility-info: #abb3f0;
    --color-content-utility-success: var(--color-role-dark-content-utility-success);
    --color-content-utility-warning: var(--color-role-dark-content-utility-warning);
    --color-content-xray-atom: var(--color-role-dark-content-xray-atom);
    --color-content-xray-molecule: var(--color-role-dark-content-xray-molecule);
    --color-content-xray-organism: var(--color-role-dark-content-xray-organism);
    --color-content-xray-template: var(--color-role-dark-content-xray-template);
    --color-elevation-shadow: #000000cc;
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-background-brand: var(--color-role-dark-background-brand);
  --color-background-brand-hover: var(--color-role-dark-background-brand-hover);
  --color-background-default: var(--color-role-dark-background-default);
  --color-background-disabled: #161925;
  --color-background-highlight: var(--color-role-dark-background-highlight);
  --color-background-knockout: var(--color-role-dark-background-knockout);
  --color-background-knockout-translucent: var(--color-role-dark-background-knockout-translucent);
  --color-background-raised: var(--color-role-dark-background-raised);
  --color-background-selected: var(--color-role-dark-background-selected);
  --color-background-subtle: var(--color-role-dark-background-subtle);
  --color-background-subtle-hover: #42454e;
  --color-background-surface: var(--color-role-dark-background-surface);
  --color-background-utility-error: var(--color-role-dark-background-utility-error);
  --color-background-utility-info: #15193f;
  --color-background-utility-success: var(--color-role-dark-background-utility-success);
  --color-background-utility-warning: var(--color-role-dark-background-utility-warning);
  --color-border-brand: var(--color-role-dark-border-brand);
  --color-border-brand-hover: var(--color-role-dark-border-brand-hover);
  --color-border-default: var(--color-role-dark-border-default);
  --color-border-disabled: #42454e;
  --color-border-focus: var(--color-role-dark-border-focus);
  --color-border-hover: var(--color-role-dark-border-hover);
  --color-border-selected: var(--color-role-dark-border-selected);
  --color-border-strong: var(--color-role-dark-border-strong);
  --color-border-subtle: var(--color-role-dark-border-subtle);
  --color-border-subtle-hover: #6f7078;
  --color-border-utility-error: var(--color-role-dark-border-utility-error);
  --color-border-utility-info: #8792ea;
  --color-border-utility-success: var(--color-role-dark-border-utility-success);
  --color-border-utility-warning: var(--color-role-dark-border-utility-warning);
  --color-content-accent: var(--color-role-dark-content-accent);
  --color-content-body: var(--color-role-dark-content-body);
  --color-content-brand: var(--color-role-dark-content-brand);
  --color-content-brand-hover: var(--color-role-dark-content-brand-hover);
  --color-content-default: var(--color-role-dark-content-default);
  --color-content-disabled: var(--color-role-dark-content-disabled);
  --color-content-emphasized: var(--color-role-dark-content-emphasized);
  --color-content-headline: var(--color-role-dark-content-headline);
  --color-content-headline-brand: var(--color-role-dark-content-headline-brand);
  --color-content-knockout: var(--color-role-dark-content-knockout);
  --color-content-link: var(--color-role-dark-content-link);
  --color-content-link-hover: var(--color-role-dark-content-link-hover);
  --color-content-subtitle: var(--color-role-dark-content-subtitle);
  --color-content-subtitle-knockout: var(--color-role-dark-content-subtitle-knockout);
  --color-content-subtle: var(--color-role-dark-content-subtle);
  --color-content-utility-error: var(--color-role-dark-content-utility-error);
  --color-content-utility-info: #abb3f0;
  --color-content-utility-success: var(--color-role-dark-content-utility-success);
  --color-content-utility-warning: var(--color-role-dark-content-utility-warning);
  --color-content-xray-atom: var(--color-role-dark-content-xray-atom);
  --color-content-xray-molecule: var(--color-role-dark-content-xray-molecule);
  --color-content-xray-organism: var(--color-role-dark-content-xray-organism);
  --color-content-xray-template: var(--color-role-dark-content-xray-template);
  --color-elevation-shadow: #000000cc;
}

[data-theme="light"] {
  color-scheme: light;
}

[data-brand="rhinestone"] {
  --color-brand-default: #003e4c;
  --color-brand-highlight: #003e4c66;
  --color-brand-hover: #04737a;
  --color-brand-primary-100: #c4f6f0;
  --color-brand-primary-200: #8eede9;
  --color-brand-primary-300: #50c5c9;
  --color-brand-primary-400: #248793;
  --color-brand-primary-500: #003e4c;
  --color-brand-primary-550: #003e4c;
  --color-brand-primary-600: #003041;
  --color-brand-primary-700: #002436;
  --color-brand-primary-800: #00192c;
  --color-brand-primary-900: #001224;
  --color-brand-secondary-100: #f0f2f4;
  --color-brand-secondary-200: #e3e5ea;
  --color-brand-secondary-300: #b8bbc1;
  --color-brand-secondary-400: #7c7e84;
  --color-brand-secondary-500: #2f3033;
  --color-brand-secondary-600: #22242b;
  --color-brand-secondary-700: #171a24;
  --color-brand-secondary-800: #0e111d;
  --color-brand-secondary-900: #090b18;
  --color-brand-tertiary-100: #fdd1d2;
  --color-brand-tertiary-200: #fca4af;
  --color-brand-tertiary-300: #f77693;
  --color-brand-tertiary-400: #ef5385;
  --color-brand-tertiary-500: #e51e72;
  --color-brand-tertiary-600: #c41571;
  --color-brand-tertiary-700: #a40f6c;
  --color-brand-tertiary-800: #840962;
  --color-brand-tertiary-900: #6d055b;
  --typography-font-family-accent: var(--typography-font-family-alex-brush);
  --typography-font-family-base: var(--typography-font-family-libre);
  --typography-font-family-headline: var(--typography-font-family-fraunces);
  --typography-meta-default-font-weight: var(--typography-font-weight-500);
}

[data-brand="portfolio"] {
  --color-brand-highlight: #e12a0966;
  --color-brand-primary-100: #fde3cc;
  --color-brand-primary-200: #fcc09b;
  --color-brand-primary-300: #f69368;
  --color-brand-primary-400: #ec6942;
  --color-brand-primary-500: #e12a09;
  --color-brand-primary-550: #a20404;
  --color-brand-primary-600: #c11406;
  --color-brand-primary-700: #a20404;
  --color-brand-primary-800: #82020d;
  --color-brand-primary-900: #6c0112;
  --color-brand-secondary-100: #f0f2f4;
  --color-brand-secondary-200: #e3e5ea;
  --color-brand-secondary-300: #b8bbc1;
  --color-brand-secondary-400: #7c7e84;
  --color-brand-secondary-500: #2f3033;
  --color-brand-secondary-600: #22242b;
  --color-brand-secondary-700: #171a24;
  --color-brand-secondary-800: #0e111d;
  --color-brand-secondary-900: #090b18;
  --color-brand-tertiary-100: #fde3cc;
  --color-brand-tertiary-200: #fcc09b;
  --color-brand-tertiary-300: #f69368;
  --color-brand-tertiary-400: #ec6942;
  --color-brand-tertiary-500: #e12a09;
  --color-brand-tertiary-600: #c11406;
  --color-brand-tertiary-700: #a20404;
  --color-brand-tertiary-800: #82020d;
  --color-brand-tertiary-900: #6c0112;
  --color-role-dark-background-brand: #ff7a5c;
  --color-role-dark-background-brand-hover: #ff9478;
  --color-role-dark-background-default: #121316;
  --color-role-dark-background-highlight: #ff5a3666;
  --color-role-dark-background-knockout: #f5f5f4;
  --color-role-dark-background-knockout-translucent: #000000b3;
  --color-role-dark-background-raised: #ffffff0d;
  --color-role-dark-background-subtle: #17181b;
  --color-role-dark-background-surface: #1c1e22;
  --color-role-dark-background-utility-error: #2a1414;
  --color-role-dark-background-utility-success: #12241a;
  --color-role-dark-background-utility-warning: #2b2410;
  --color-role-dark-border-brand: #ff7a5c;
  --color-role-dark-border-brand-hover: #ff9478;
  --color-role-dark-border-default: #686b70;
  --color-role-dark-border-focus: #f5f5f4;
  --color-role-dark-border-strong: #7d8085;
  --color-role-dark-border-subtle: #f5f5f41f;
  --color-role-dark-border-utility-error: #e2665a;
  --color-role-dark-border-utility-success: #3ecf7e;
  --color-role-dark-border-utility-warning: #d9a441;
  --color-role-dark-content-accent: #ff5a36;
  --color-role-dark-content-body: #f5f5f4b3;
  --color-role-dark-content-brand: #ff7a5c;
  --color-role-dark-content-brand-hover: #ff9478;
  --color-role-dark-content-default: #d6d8da;
  --color-role-dark-content-disabled: #f5f5f466;
  --color-role-dark-content-emphasized: #f5f5f4;
  --color-role-dark-content-headline: #f5f5f4;
  --color-role-dark-content-headline-brand: #ff7a5c;
  --color-role-dark-content-knockout: #14161a;
  --color-role-dark-content-link: #ff7a5c;
  --color-role-dark-content-link-hover: #ff9478;
  --color-role-dark-content-subtitle: #f5f5f4b3;
  --color-role-dark-content-subtitle-knockout: #14161ab3;
  --color-role-dark-content-subtle: #f5f5f499;
  --color-role-dark-content-utility-error: #ff9a8f;
  --color-role-dark-content-utility-success: #7fe3a8;
  --color-role-dark-content-utility-warning: #f0c674;
  --color-role-dark-content-xray-atom: #8b93ff;
  --color-role-dark-content-xray-molecule: #b596ff;
  --color-role-dark-content-xray-organism: #3ddb95;
  --color-role-dark-content-xray-template: #e0a83e;
  --color-role-light-background-default: #f8f8f8;
  --color-role-light-background-highlight: #e12a0966;
  --color-role-light-background-knockout: #313638;
  --color-role-light-background-knockout-translucent: #0f0f0fcc;
  --color-role-light-background-raised: #ffffff0d;
  --color-role-light-background-subtle: #faf9f5;
  --color-role-light-background-utility-error: #fbe5e5;
  --color-role-light-background-utility-success: #e3f2e9;
  --color-role-light-background-utility-warning: #fff3d6;
  --color-role-light-border-default: #cccccc;
  --color-role-light-border-focus: #0f0f0f;
  --color-role-light-border-strong: #909090;
  --color-role-light-border-subtle: #0f0f0f14;
  --color-role-light-border-utility-error: #d00000;
  --color-role-light-border-utility-success: #007b31;
  --color-role-light-border-utility-warning: #9a6200;
  --color-role-light-content-accent: var(--color-brand-primary-500);
  --color-role-light-content-body: #0f0f0fb3;
  --color-role-light-content-default: #313638;
  --color-role-light-content-disabled: #0f0f0f66;
  --color-role-light-content-emphasized: #0f0f0f;
  --color-role-light-content-headline: #0f0f0f;
  --color-role-light-content-knockout: #f8f8f8;
  --color-role-light-content-subtitle: #0f0f0fb3;
  --color-role-light-content-subtitle-knockout: #f8f8f8b3;
  --color-role-light-content-subtle: #0f0f0f99;
  --color-role-light-content-utility-error: #7e0000;
  --color-role-light-content-utility-success: #005522;
  --color-role-light-content-utility-warning: #6e4600;
  --color-role-light-content-xray-atom: #3b4ede;
  --color-role-light-content-xray-molecule: #7a3bde;
  --color-role-light-content-xray-organism: #00754a;
  --color-role-light-content-xray-template: #b26e00;
  --typography-body-emphasized-font-size: var(--typography-font-size-16);
  --typography-body-emphasized-letter-spacing: var(--typography-letter-spacing-0);
  --typography-body-emphasized-line-height: var(--typography-line-height-24);
  --typography-body-lg-font-size: var(--typography-font-size-24);
  --typography-body-lg-letter-spacing: var(--typography-letter-spacing-0);
  --typography-body-lg-line-height: var(--typography-line-height-32);
  --typography-body-sm-font-weight: var(--typography-font-weight-400);
  --typography-body-sm-letter-spacing: var(--typography-letter-spacing-0);
  --typography-body-sm-line-height: var(--typography-line-height-24);
  --typography-display-default-mobile-font-size: var(--typography-font-size-40);
  --typography-display-default-mobile-font-weight: var(--typography-font-weight-900);
  --typography-display-default-mobile-letter-spacing: var(--typography-letter-spacing-0);
  --typography-display-default-mobile-line-height: var(--typography-line-height-48);
  --typography-display-default-font-size: var(--typography-font-size-80);
  --typography-display-default-letter-spacing: var(--typography-letter-spacing-0);
  --typography-display-default-line-height: var(--typography-line-height-88);
  --typography-display-sm-mobile-font-size: var(--typography-font-size-40);
  --typography-display-sm-mobile-font-weight: var(--typography-font-weight-900);
  --typography-display-sm-mobile-letter-spacing: var(--typography-letter-spacing-0);
  --typography-display-sm-mobile-line-height: var(--typography-line-height-48);
  --typography-display-sm-font-weight: var(--typography-font-weight-900);
  --typography-display-sm-letter-spacing: var(--typography-letter-spacing-0);
  --typography-headline-default-mobile-font-weight: var(--typography-font-weight-400);
  --typography-headline-default-mobile-letter-spacing: var(--typography-letter-spacing-0);
  --typography-headline-default-font-size: var(--typography-font-size-56);
  --typography-headline-default-font-weight: var(--typography-font-weight-400);
  --typography-headline-default-letter-spacing: var(--typography-letter-spacing-0);
  --typography-headline-default-line-height: var(--typography-line-height-64);
  --typography-headline-lg-mobile-font-size: var(--typography-font-size-32);
  --typography-headline-lg-mobile-font-weight: var(--typography-font-weight-600);
  --typography-headline-lg-mobile-letter-spacing: var(--typography-letter-spacing-0);
  --typography-headline-lg-mobile-line-height: var(--typography-line-height-40);
  --typography-headline-lg-font-size: var(--typography-font-size-56);
  --typography-headline-lg-font-weight: var(--typography-font-weight-600);
  --typography-headline-lg-letter-spacing: var(--typography-letter-spacing-0);
  --typography-headline-lg-line-height: var(--typography-line-height-64);
  --typography-headline-sm-mobile-font-size: var(--typography-font-size-32);
  --typography-headline-sm-mobile-font-weight: var(--typography-font-weight-700);
  --typography-headline-sm-mobile-letter-spacing: var(--typography-letter-spacing-0);
  --typography-headline-sm-mobile-line-height: var(--typography-line-height-40);
  --typography-headline-sm-letter-spacing: var(--typography-letter-spacing-0);
  --typography-label-sm-font-weight: var(--typography-font-weight-400);
  --typography-label-sm-line-height: var(--typography-line-height-24);
  --typography-meta-default-line-height: var(--typography-line-height-24);
  --typography-meta-sm-font-weight: var(--typography-font-weight-400);
  --typography-meta-sm-letter-spacing: var(--typography-letter-spacing-0);
  --typography-title-lg-mobile-font-size: var(--typography-font-size-32);
  --typography-title-lg-mobile-font-weight: var(--typography-font-weight-600);
  --typography-title-lg-mobile-letter-spacing: var(--typography-letter-spacing-0);
  --typography-title-lg-mobile-line-height: var(--typography-line-height-40);
  --typography-title-lg-font-weight: var(--typography-font-weight-600);
  --typography-title-lg-letter-spacing: var(--typography-letter-spacing-0);
  --typography-title-sm-font-weight: var(--typography-font-weight-600);
  --typography-title-sm-letter-spacing: var(--typography-letter-spacing-0);
}