@font-face {
    font-family: 'Coop Sans Variable';
    src:
        url(/Assets/apps/coopse/dist/CoopSansVariableVF.woff2) format('woff2'),
        url(/Assets/apps/coopse/dist/CoopSansVariableVF.woff) format('woff');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Coop Marker';
    src:
        url(/Assets/apps/coopse/dist/CoopMarker-Regular.woff2) format('woff2'),
        url(/Assets/apps/coopse/dist/CoopMarker-Regular.woff) format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --cds-semantic-color-background-backdrop: rgba(0, 0, 0, 0.6); /** Semi-transparent overlay background rendered behind modals and dialogs to dim the content beneath. */
  --cds-semantic-color-background-brand-accent: #aad23c; /** Accent brand fill color for distinctive brand-colored highlights and decorative surfaces. */
  --cds-semantic-color-background-brand-primary: #0a893d; /** Primary brand fill color for brand-colored surfaces and prominent UI regions. */
  --cds-semantic-color-background-brand-secondary: #00502e; /** Secondary brand fill color for supporting brand-colored surfaces. */
  --cds-semantic-color-background-brand-tertiary: #e0efdd; /** Tertiary brand fill color for additional brand-colored surfaces. */
  --cds-semantic-color-background-canvas: #f5f5f5; /** Main artboard / screen */
  --cds-semantic-color-background-elevated: #ffffff; /** Modals, fly in, sheets. Tied to Z-index. */
  --cds-semantic-color-background-expressive-1-strong: #d33636; /** Expressive slot 1 strong background fill for visually distinctive areas such as campaigns or banners. */
  --cds-semantic-color-background-expressive-1-subtle: #fae1e1; /** Expressive slot 1 subtle background fill for visually distinctive areas such as campaigns or banners. */
  --cds-semantic-color-background-expressive-2-strong: #c75102; /** Expressive slot 2 strong background fill for visually distinctive areas such as campaigns or banners. */
  --cds-semantic-color-background-expressive-2-subtle: #ffe9db; /** Expressive slot 2 subtle background fill for visually distinctive areas such as campaigns or banners. */
  --cds-semantic-color-background-expressive-3-strong: #ca36a3; /** Expressive slot 3 strong background fill for visually distinctive areas such as campaigns or banners. */
  --cds-semantic-color-background-expressive-3-subtle: #fbe0f4; /** Expressive slot 3 subtle background fill for visually distinctive areas such as campaigns or banners. */
  --cds-semantic-color-background-expressive-4-strong: #1f76b0; /** Expressive slot 4 strong background fill for visually distinctive areas such as campaigns or banners. */
  --cds-semantic-color-background-expressive-4-subtle: #ddf0fd; /** Expressive slot 4 subtle background fill for visually distinctive areas such as campaigns or banners. */
  --cds-semantic-color-background-expressive-5-strong: #008a14; /** Expressive slot 5 strong background fill for visually distinctive areas such as campaigns or banners. */
  --cds-semantic-color-background-expressive-5-subtle: #cce8d0; /** Expressive slot 5 subtle background fill for visually distinctive areas such as campaigns or banners. */
  --cds-semantic-color-background-feedback-critical: #faeef3; /** Background fill for critical feedback states such as error banners and alerts. */
  --cds-semantic-color-background-feedback-destructive: #d94335; /** Background fill for destructive feedback states such as deletion confirmation surfaces. */
  --cds-semantic-color-background-feedback-neutral: #ffffff; /** Background fill for neutral feedback states such as informational banners and alerts. */
  --cds-semantic-color-background-feedback-success: #c8e2cc; /** Background fill for success feedback states such as confirmation banners and alerts. */
  --cds-semantic-color-background-feedback-warning: #fff000; /** Background fill for warning feedback states such as caution banners and alerts. */
  --cds-semantic-color-background-inverse: #333333; /** High-contrast inverse surface background for elements that flip light/dark relative to the canvas. */
  --cds-semantic-color-background-member-strong: #0a893d; /** High-emphasis member surface. Pairs with color/text/member/on-strong. */
  --cds-semantic-color-background-member-subtle: #daf5ce; /** Low-emphasis member surface. Pairs with color/text/member/on-subtle. */
  --cds-semantic-color-background-pricing-discount: #fff000; /** Background fill for discount pricing labels and badges. */
  --cds-semantic-color-background-pricing-member: #0a893d; /** Background fill for member-exclusive pricing labels and badges. */
  --cds-semantic-color-background-promo-1: #cc0000; /** Primary promo surface background. Always pair with color/text/on-promo/1 for accessible contrast. */
  --cds-semantic-color-background-promo-2: #fff000; /** Secondary promo surface background. Always pair with color/text/on-promo/2 for accessible contrast. */
  --cds-semantic-color-background-sheet: #ffffff; /** Background fill for bottom sheets and slide-in drawer panels. */
  --cds-semantic-color-background-strong: #c8c8c8; /** High-contrast surface fill for elements that need stronger visual separation from the canvas. */
  --cds-semantic-color-background-subtle: #dfdfdf; /** Secondary surface fill for low-emphasis areas layered above the canvas background. */
  --cds-semantic-color-background-transparent: rgba(0, 0, 0, 0); /** Fully transparent background fill used to clear or reset a surface color. */
  --cds-semantic-color-icon-brand-accent: #aad23c; /** Icon color in the accent brand hue, applied directly to icon elements. For icons placed on top of accent-colored surfaces, use color/icon/brand/on-accent instead. */
  --cds-semantic-color-icon-brand-on-accent: #005537; /** Icon color for elements placed on top of accent brand backgrounds. Ensures contrast compliance when paired with color/background/brand/accent. */
  --cds-semantic-color-icon-brand-on-primary: #ffffff; /** Fill color for icons on primary brand-colored surfaces. */
  --cds-semantic-color-icon-brand-on-secondary: #ffffff; /** Fill color for icons on secondary brand-colored surfaces. */
  --cds-semantic-color-icon-brand-on-tertiary: #333333; /** Fill color for icons on tertiary brand-colored surfaces. */
  --cds-semantic-color-icon-brand-primary: #0a893d; /** Primary brand icon color for standalone brand-colored icon elements. */
  --cds-semantic-color-icon-brand-secondary: #00502e; /** Secondary brand icon color for standalone brand-colored icon elements. */
  --cds-semantic-color-icon-brand-tertiary: #e0efdd; /** Tertiary brand icon color for standalone brand-colored icon elements. */
  --cds-semantic-color-icon-expressive-1-on-strong: #ffffff; /** Icon color for content placed on expressive slot 1 strong backgrounds. */
  --cds-semantic-color-icon-expressive-1-on-subtle: #490000; /** Icon color for content placed on expressive slot 1 subtle backgrounds. */
  --cds-semantic-color-icon-expressive-1-strong: #ab0000; /** Icon color matching the expressive slot 1 strong background — for use on non-expressive surfaces. */
  --cds-semantic-color-icon-expressive-1-subtle: #eeaaaa; /** Icon color matching the expressive slot 1 subtle background — for use on non-expressive surfaces. */
  --cds-semantic-color-icon-expressive-2-on-strong: #ffffff; /** Icon color for content placed on expressive slot 2 strong backgrounds. */
  --cds-semantic-color-icon-expressive-2-on-subtle: #471c00; /** Icon color for content placed on expressive slot 2 subtle backgrounds. */
  --cds-semantic-color-icon-expressive-2-strong: #c75102; /** Icon color matching the expressive slot 2 strong background — for use on non-expressive surfaces. */
  --cds-semantic-color-icon-expressive-2-subtle: #ffe9db; /** Icon color matching the expressive slot 2 subtle background — for use on non-expressive surfaces. */
  --cds-semantic-color-icon-expressive-3-on-strong: #ffffff; /** Icon color for content placed on expressive slot 3 strong backgrounds. */
  --cds-semantic-color-icon-expressive-3-on-subtle: #531b44; /** Icon color for content placed on expressive slot 3 subtle backgrounds. */
  --cds-semantic-color-icon-expressive-3-strong: #ca36a3; /** Icon color matching the expressive slot 3 strong background — for use on non-expressive surfaces. */
  --cds-semantic-color-icon-expressive-3-subtle: #fbe0f4; /** Icon color matching the expressive slot 3 subtle background — for use on non-expressive surfaces. */
  --cds-semantic-color-icon-expressive-4-on-strong: #ffffff; /** Icon color for content placed on expressive slot 4 strong backgrounds. */
  --cds-semantic-color-icon-expressive-4-on-subtle: #002a47; /** Icon color for content placed on expressive slot 4 subtle backgrounds. */
  --cds-semantic-color-icon-expressive-4-strong: #1f76b0; /** Icon color matching the expressive slot 4 strong background — for use on non-expressive surfaces. */
  --cds-semantic-color-icon-expressive-4-subtle: #ddf0fd; /** Icon color matching the expressive slot 4 subtle background — for use on non-expressive surfaces. */
  --cds-semantic-color-icon-expressive-5-on-strong: #ffffff; /** Icon color for content placed on expressive slot 5 strong backgrounds. */
  --cds-semantic-color-icon-expressive-5-on-subtle: #003307; /** Icon color for content placed on expressive slot 5 subtle backgrounds. */
  --cds-semantic-color-icon-expressive-5-strong: #008a14; /** Icon color matching the expressive slot 5 strong background — for use on non-expressive surfaces. */
  --cds-semantic-color-icon-expressive-5-subtle: #cce8d0; /** Icon color matching the expressive slot 5 subtle background — for use on non-expressive surfaces. */
  --cds-semantic-color-icon-feedback-error: #cc0000; /** Fill color for error state icons. Used alongside error text in validation and error states. */
  --cds-semantic-color-icon-feedback-on-critical: #cc0000; /** Fill color for icons on critical feedback surfaces (e.g. critical alert icon backgrounds). */
  --cds-semantic-color-icon-feedback-on-destructive: #ffe7e2; /** Fill color for icons on destructive feedback surfaces (e.g. destructive confirmation icon backgrounds). */
  --cds-semantic-color-icon-feedback-on-neutral: #333333; /** Fill color for icons on neutral feedback surfaces (e.g. informational alert icon backgrounds). */
  --cds-semantic-color-icon-feedback-on-success: #333333; /** Fill color for icons on success feedback surfaces (e.g. success alert icon backgrounds). */
  --cds-semantic-color-icon-feedback-on-warning: #333333; /** Fill color for icons on warning feedback surfaces (e.g. warning alert icon backgrounds). */
  --cds-semantic-color-icon-highlight: #0a893d; /** Fill color for highlighted icons, used alongside highlight text in search results or emphasis contexts. */
  --cds-semantic-color-icon-inverse: #ffffff; /** Fill color for icons placed on dark or inverted backgrounds. */
  --cds-semantic-color-icon-pricing-on-discount: #cc0000; /** Fill color for icons on discount pricing badge surfaces. */
  --cds-semantic-color-icon-pricing-on-member: #ffffff; /** Fill color for icons on member pricing badge surfaces. */
  --cds-semantic-color-icon-primary: #333333; /** Fill color for primary icons. Default icon color matching primary text emphasis. */
  --cds-semantic-color-icon-secondary: #333333; /** Fill color for secondary (subdued) icons. Used for supporting and decorative icon instances. */
  --cds-semantic-color-interactive-background-read-only: #dfdfdf; /** Background fill for interactive control elements in their read-only state. */
  --cds-semantic-color-interactive-card-background: #ffffff; /** Background fill for interactive card components in their default state. */
  --cds-semantic-color-interactive-card-background-hover: #ffffff; /** Background fill for interactive card components in their hover state. */
  --cds-semantic-color-interactive-card-background-pressed: #ffffff; /** Background fill for interactive card components in their pressed state. */
  --cds-semantic-color-interactive-card-icon: #333333; /** Icon color for icons within interactive card components. */
  --cds-semantic-color-interactive-card-text: #333333; /** Text color for content within interactive card components. */
  --cds-semantic-color-interactive-control-background: #ffffff; /** Background fill for form control elements in their default state. */
  --cds-semantic-color-interactive-control-background-hover: #ffffff; /** Background fill for form control elements in their hover state. */
  --cds-semantic-color-interactive-control-background-pressed: #ffffff; /** Background fill for form control elements in their pressed state. */
  --cds-semantic-color-interactive-control-background-selection-off: #ffffff; /** Background fill for form control elements (checkbox, radio, toggle) in their unselected (off) state. */
  --cds-semantic-color-interactive-control-background-selection-on: #00502e; /** Background fill for form control elements (checkbox, radio, toggle) in their selected (on) state. */
  --cds-semantic-color-interactive-control-icon: #242424; /** Icon color for form control elements (checkbox, radio, toggle) in their default state. */
  --cds-semantic-color-interactive-control-icon-inverse-inverse: #242424; /** Icon color for the indicator inside the switch component thumb on inverse surfaces, maintaining contrast against the thumb's inverted background. */
  --cds-semantic-color-interactive-control-indicator-off: #333333; /** Indicator color for form control elements (checkbox, radio, toggle) in their unselected (off) state. */
  --cds-semantic-color-interactive-control-indicator-on: #ffffff; /** Indicator color for form control elements (checkbox, radio, toggle) in their selected (on) state. */
  --cds-semantic-color-interactive-control-stroke: #898989; /** Border color for form control elements (checkbox, radio, toggle) in their default state. */
  --cds-semantic-color-interactive-control-stroke-hover: #898989; /** Border color for form control elements (checkbox, radio, toggle) in their hover state. */
  --cds-semantic-color-interactive-control-stroke-pressed: #898989; /** Border color for form control elements (checkbox, radio, toggle) in their pressed state. */
  --cds-semantic-color-interactive-control-text: #333333; /** Text color for form control labels in their default state. */
  --cds-semantic-color-interactive-critical-background: #ffcae0; /** Background fill for critical severity buttons in their default state. */
  --cds-semantic-color-interactive-critical-background-hover: #ffcae0; /** Background fill for critical severity buttons in their hover state. */
  --cds-semantic-color-interactive-critical-background-pressed: #cc0000; /** Background fill for critical severity buttons in their pressed state. */
  --cds-semantic-color-interactive-critical-icon: #b20000; /** Icon color for critical severity button icons. */
  --cds-semantic-color-interactive-critical-stroke: rgba(0, 0, 0, 0); /** Border color for critical severity buttons in their default state. */
  --cds-semantic-color-interactive-critical-stroke-hover: rgba(0, 0, 0, 0); /** Border color for critical severity buttons in their hover state. */
  --cds-semantic-color-interactive-critical-stroke-pressed: #4d1b1d; /** Border color for critical severity buttons in their pressed state. */
  --cds-semantic-color-interactive-critical-text: #b20000; /** Text color for critical severity button labels. */
  --cds-semantic-color-interactive-destructive-background: #cc0000; /** Background fill for destructive action buttons in their default state. */
  --cds-semantic-color-interactive-destructive-background-hover: #cc0000; /** Background fill for destructive action buttons in their hover state. */
  --cds-semantic-color-interactive-destructive-background-pressed: #ffcae0; /** Background fill for destructive action buttons in their pressed state. */
  --cds-semantic-color-interactive-destructive-icon: #ffffff; /** Icon color for destructive action button icons. */
  --cds-semantic-color-interactive-destructive-stroke: rgba(0, 0, 0, 0); /** Border color for destructive action buttons in their default state. */
  --cds-semantic-color-interactive-destructive-stroke-hover: rgba(0, 0, 0, 0); /** Border color for destructive action buttons in their hover state. */
  --cds-semantic-color-interactive-destructive-stroke-pressed: #430000; /** Border color for destructive action buttons in their pressed state. */
  --cds-semantic-color-interactive-destructive-text: #ffffff; /** Text color for destructive action button labels. */
  --cds-semantic-color-interactive-icon-read-only: #616161; /** Icon color for interactive control elements in their read-only state. */
  --cds-semantic-color-interactive-inverse-background: #333333; /** Background fill for inverse buttons in their default state. */
  --cds-semantic-color-interactive-inverse-background-hover: #333333; /** Background fill for inverse buttons in their hover state. */
  --cds-semantic-color-interactive-inverse-background-pressed: #333333; /** Background fill for inverse buttons in their pressed state. */
  --cds-semantic-color-interactive-inverse-icon: #ffffff; /** Icon color for inverse button icons. */
  --cds-semantic-color-interactive-inverse-stroke: #616161; /** Border color for inverse buttons in their default state. */
  --cds-semantic-color-interactive-inverse-stroke-hover: #616161; /** Border color for inverse buttons in their hover state. */
  --cds-semantic-color-interactive-inverse-stroke-pressed: #616161; /** Border color for inverse buttons in their pressed state. */
  --cds-semantic-color-interactive-inverse-text: #ffffff; /** Text color for inverse button labels. */
  --cds-semantic-color-interactive-link-text: #333333; /** Text color for link interactive elements in their default state. */
  --cds-semantic-color-interactive-link-text-inverse: #ffffff; /** Text color for link interactive elements displayed on dark or inverted backgrounds. */
  --cds-semantic-color-interactive-link-text-inverse-visited: #ffffff; /** Text color for visited link interactive elements displayed on dark or inverted backgrounds. */
  --cds-semantic-color-interactive-link-text-visited: #333333; /** Text color for link interactive elements that have been previously visited. */
  --cds-semantic-color-interactive-outlined-inverse-background: rgba(0, 0, 0, 0); /** Background fill for outlined-inverse buttons in their default state (typically transparent). */
  --cds-semantic-color-interactive-outlined-inverse-background-hover: rgba(0, 0, 0, 0); /** Background fill for outlined-inverse buttons in their hover state. */
  --cds-semantic-color-interactive-outlined-inverse-background-pressed: rgba(0, 0, 0, 0); /** Background fill for outlined-inverse buttons in their pressed state. */
  --cds-semantic-color-interactive-outlined-inverse-icon: #000000; /** Icon color for outlined-inverse button icons. */
  --cds-semantic-color-interactive-outlined-inverse-stroke: #000000; /** Border color for outlined-inverse buttons in their default state. */
  --cds-semantic-color-interactive-outlined-inverse-stroke-hover: #000000; /** Border color for outlined-inverse buttons in their hover state. */
  --cds-semantic-color-interactive-outlined-inverse-stroke-pressed: #000000; /** Border color for outlined-inverse buttons in their pressed state. */
  --cds-semantic-color-interactive-outlined-inverse-text: #000000; /** Text color for outlined-inverse button labels. */
  --cds-semantic-color-interactive-outlined-subtle-background: rgba(0, 0, 0, 0); /** Background fill for outlined-subtle buttons in their default state (typically transparent). */
  --cds-semantic-color-interactive-outlined-subtle-background-hover: rgba(0, 0, 0, 0); /** Background fill for outlined-subtle buttons in their hover state. */
  --cds-semantic-color-interactive-outlined-subtle-background-pressed: rgba(0, 0, 0, 0); /** Background fill for outlined-subtle buttons in their pressed state. */
  --cds-semantic-color-interactive-outlined-subtle-icon: #ffffff; /** Icon color for outlined-subtle button icons. */
  --cds-semantic-color-interactive-outlined-subtle-stroke: #ffffff; /** Border color for outlined-subtle buttons in their default state. */
  --cds-semantic-color-interactive-outlined-subtle-stroke-hover: #ffffff; /** Border color for outlined-subtle buttons in their hover state. */
  --cds-semantic-color-interactive-outlined-subtle-stroke-pressed: #ffffff; /** Border color for outlined-subtle buttons in their pressed state. */
  --cds-semantic-color-interactive-outlined-subtle-text: #ffffff; /** Text color for outlined-subtle button labels. */
  --cds-semantic-color-interactive-outlined-background: rgba(0, 0, 0, 0); /** Background fill for outlined buttons in their default state (typically transparent). */
  --cds-semantic-color-interactive-outlined-background-hover: rgba(0, 0, 0, 0); /** Background fill for outlined buttons in their hover state. */
  --cds-semantic-color-interactive-outlined-background-pressed: rgba(0, 0, 0, 0); /** Background fill for outlined buttons in their pressed state. */
  --cds-semantic-color-interactive-outlined-icon: #00502e; /** Icon color for outlined button icons. */
  --cds-semantic-color-interactive-outlined-stroke: #00502e; /** Border color for outlined buttons in their default state. */
  --cds-semantic-color-interactive-outlined-stroke-hover: #00502e; /** Border color for outlined buttons in their hover state. */
  --cds-semantic-color-interactive-outlined-stroke-pressed: #00502e; /** Border color for outlined buttons in their pressed state. */
  --cds-semantic-color-interactive-outlined-text: #00502e; /** Text color for outlined button labels. */
  --cds-semantic-color-interactive-primary-background: #0a893d; /** Background fill for primary action buttons in their default state. */
  --cds-semantic-color-interactive-primary-background-hover: #0a893d; /** Background fill for primary action buttons in their hover state. */
  --cds-semantic-color-interactive-primary-background-pressed: #0a893d; /** Background fill for primary action buttons in their pressed state. */
  --cds-semantic-color-interactive-primary-icon: #ffffff; /** Icon color for primary action button icons. */
  --cds-semantic-color-interactive-primary-stroke: rgba(0, 0, 0, 0); /** Border color for primary action buttons in their default state. */
  --cds-semantic-color-interactive-primary-stroke-hover: rgba(0, 0, 0, 0); /** Border color for primary action buttons in their hover state. */
  --cds-semantic-color-interactive-primary-stroke-pressed: #00502e; /** Border color for primary action buttons in their pressed state. */
  --cds-semantic-color-interactive-primary-text: #ffffff; /** Text color for primary action button labels. */
  --cds-semantic-color-interactive-secondary-background: #e0efdd; /** Background fill for secondary action buttons in their default state. */
  --cds-semantic-color-interactive-secondary-background-hover: #e0efdd; /** Background fill for secondary action buttons in their hover state. */
  --cds-semantic-color-interactive-secondary-background-pressed: #e0efdd; /** Background fill for secondary action buttons in their pressed state. */
  --cds-semantic-color-interactive-secondary-icon: #00502e; /** Icon color for secondary action button icons. */
  --cds-semantic-color-interactive-secondary-stroke: rgba(0, 0, 0, 0); /** Border color for secondary action buttons in their default state. */
  --cds-semantic-color-interactive-secondary-stroke-hover: rgba(0, 0, 0, 0); /** Border color for secondary action buttons in their hover state. */
  --cds-semantic-color-interactive-secondary-stroke-pressed: rgba(0, 0, 0, 0); /** Border color for secondary action buttons in their pressed state. */
  --cds-semantic-color-interactive-secondary-text: #00502e; /** Text color for secondary action button labels. */
  --cds-semantic-color-interactive-stroke-read-only: #c8c8c8; /** Border color for interactive control elements in their read-only state. */
  --cds-semantic-color-interactive-subtle-background: #ffffff; /** Background fill for subtle (low-emphasis) interactive buttons in their default state. */
  --cds-semantic-color-interactive-subtle-background-hover: #ffffff; /** Background fill for subtle (low-emphasis) interactive buttons in their hover state. */
  --cds-semantic-color-interactive-subtle-background-pressed: #ffffff; /** Background fill for subtle (low-emphasis) interactive buttons in their pressed state. */
  --cds-semantic-color-interactive-subtle-icon: #333333; /** Icon color for subtle (low-emphasis) interactive button icons. */
  --cds-semantic-color-interactive-subtle-stroke: #dfdfdf; /** Border color for subtle (low-emphasis) interactive buttons in their default state. */
  --cds-semantic-color-interactive-subtle-stroke-hover: #dfdfdf; /** Border color for subtle (low-emphasis) interactive buttons in their hover state. */
  --cds-semantic-color-interactive-subtle-stroke-pressed: #dfdfdf; /** Border color for subtle (low-emphasis) interactive buttons in their pressed state. */
  --cds-semantic-color-interactive-subtle-text: #333333; /** Text color for subtle (low-emphasis) interactive button labels. */
  --cds-semantic-color-interactive-text-read-only: #616161; /** Text color for interactive control elements in their read-only state. */
  --cds-semantic-color-stroke-brand-accent: #aad23c; /** Brand border color applied on top of accent brand-colored surfaces. */
  --cds-semantic-color-stroke-brand-on-accent: #0b9643; /** Brand border color applied on top of accent-colored surfaces where the accent sits on a contrasting background. */
  --cds-semantic-color-stroke-brand-on-primary: #0a893d; /** Brand border color applied on top of primary brand-colored surfaces. */
  --cds-semantic-color-stroke-brand-on-secondary: #00502e; /** Brand border color applied on top of secondary brand-colored surfaces. */
  --cds-semantic-color-stroke-brand-on-tertiary: #e0efdd; /** Brand border color applied on top of tertiary brand-colored surfaces. */
  --cds-semantic-color-stroke-divider: #c8c8c8; /** Horizontal rule border color for separating content sections within a page or component. */
  --cds-semantic-color-stroke-expressive-1-strong: #ab0000; /** Expressive slot 1 strong stroke color for borders in visually distinctive areas. */
  --cds-semantic-color-stroke-expressive-1-subtle: #eeaaaa; /** Expressive slot 1 subtle stroke color for borders in visually distinctive areas. */
  --cds-semantic-color-stroke-expressive-2-strong: #9a3e00; /** Expressive slot 2 strong stroke color for borders in visually distinctive areas. */
  --cds-semantic-color-stroke-expressive-2-subtle: #ffbc90; /** Expressive slot 2 subtle stroke color for borders in visually distinctive areas. */
  --cds-semantic-color-stroke-expressive-3-strong: #9e3181; /** Expressive slot 3 strong stroke color for borders in visually distinctive areas. */
  --cds-semantic-color-stroke-expressive-3-subtle: #eba8d9; /** Expressive slot 3 subtle stroke color for borders in visually distinctive areas. */
  --cds-semantic-color-stroke-expressive-4-strong: #0c5c92; /** Expressive slot 4 strong stroke color for borders in visually distinctive areas. */
  --cds-semantic-color-stroke-expressive-4-subtle: #7bc6f8; /** Expressive slot 4 subtle stroke color for borders in visually distinctive areas. */
  --cds-semantic-color-stroke-expressive-5-strong: #005e0e; /** Expressive slot 5 strong stroke color for borders in visually distinctive areas. */
  --cds-semantic-color-stroke-expressive-5-subtle: #7ac285; /** Expressive slot 5 subtle stroke color for borders in visually distinctive areas. */
  --cds-semantic-color-stroke-feedback-critical: #ffcae0; /** Stroke color for critical warning states — signals a severe or blocking situation requiring immediate attention. Not for form validation errors; use color/stroke/feedback/error for those. */
  --cds-semantic-color-stroke-feedback-error: #cc0000; /** Stroke color for form validation errors — applied to input field borders when user-submitted data fails validation. */
  --cds-semantic-color-stroke-feedback-neutral: #898989; /** Border color for neutral feedback states such as informational input fields and alert outlines. */
  --cds-semantic-color-stroke-feedback-success: #c8e2cc; /** Border color for success feedback states such as valid input fields and confirmation outlines. */
  --cds-semantic-color-stroke-feedback-warning: #fff000; /** Border color for warning feedback states such as caution input fields and alert outlines. */
  --cds-semantic-color-stroke-highlight: #0a893d; /** Stroke color for selected or highlighted elements, such as selected item indicators and accent borders. Broadly applicable for any visual marking or selection state. */
  --cds-semantic-color-stroke-pricing-discount: #fff000; /** Border color for discount pricing labels and badges. */
  --cds-semantic-color-stroke-pricing-member: #0a893d; /** Border color for member-exclusive pricing labels and badges. */
  --cds-semantic-color-stroke-strong: #898989; /** High-emphasis border color for prominent outlines on interactive elements such as focused inputs and selected states. */
  --cds-semantic-color-stroke-subtle: #dfdfdf; /** Low-emphasis border color for subtle dividers and understated outlines on interactive and static elements. */
  --cds-semantic-color-stroke-transparent: rgba(0, 0, 0, 0); /** Fully transparent stroke used to clear or reset a border color. */
  --cds-semantic-color-text-brand-accent: #aad23c; /** Text color in the accent brand hue, applied directly to text elements. For text placed on top of accent-colored backgrounds, use color/text/brand/on-accent instead. */
  --cds-semantic-color-text-brand-on-accent: #005537; /** Text color for content placed on top of accent brand backgrounds. Ensures WCAG contrast compliance when paired with color/background/brand/accent. */
  --cds-semantic-color-text-brand-on-primary: #ffffff; /** Fill color for text on primary brand-colored surfaces (e.g. primary buttons, primary badges). */
  --cds-semantic-color-text-brand-on-secondary: #ffffff; /** Fill color for text on secondary brand-colored surfaces (e.g. secondary buttons, secondary badges). */
  --cds-semantic-color-text-brand-on-tertiary: #333333; /** Fill color for text on tertiary brand-colored surfaces. */
  --cds-semantic-color-text-expressive-1-on-strong: #ffffff; /** Text color for content placed on expressive slot 1 strong backgrounds. */
  --cds-semantic-color-text-expressive-1-on-subtle: #490000; /** Text color for content placed on expressive slot 1 subtle backgrounds. */
  --cds-semantic-color-text-expressive-1-strong: #ab0000; /** Text color matching the expressive slot 1 strong background — for use on non-expressive surfaces. */
  --cds-semantic-color-text-expressive-1-subtle: #eeaaaa; /** Text color matching the expressive slot 1 subtle background — for use on non-expressive surfaces. */
  --cds-semantic-color-text-expressive-2-on-strong: #ffffff; /** Text color for content placed on expressive slot 2 strong backgrounds. */
  --cds-semantic-color-text-expressive-2-on-subtle: #471c00; /** Text color for content placed on expressive slot 2 subtle backgrounds. */
  --cds-semantic-color-text-expressive-2-strong: #c75102; /** Text color matching the expressive slot 2 strong background — for use on non-expressive surfaces. */
  --cds-semantic-color-text-expressive-2-subtle: #ffe9db; /** Text color matching the expressive slot 2 subtle background — for use on non-expressive surfaces. */
  --cds-semantic-color-text-expressive-3-on-strong: #ffffff; /** Text color for content placed on expressive slot 3 strong backgrounds. */
  --cds-semantic-color-text-expressive-3-on-subtle: #531b44; /** Text color for content placed on expressive slot 3 subtle backgrounds. */
  --cds-semantic-color-text-expressive-3-strong: #ca36a3; /** Text color matching the expressive slot 3 strong background — for use on non-expressive surfaces. */
  --cds-semantic-color-text-expressive-3-subtle: #fbe0f4; /** Text color matching the expressive slot 3 subtle background — for use on non-expressive surfaces. */
  --cds-semantic-color-text-expressive-4-on-strong: #ffffff; /** Text color for content placed on expressive slot 4 strong backgrounds. */
  --cds-semantic-color-text-expressive-4-on-subtle: #002a47; /** Fill color for text on subtle expressive slot 4 surfaces. */
  --cds-semantic-color-text-expressive-4-strong: #1f76b0; /** Text color matching the expressive slot 4 strong background — for use on non-expressive surfaces. */
  --cds-semantic-color-text-expressive-4-subtle: #ddf0fd; /** Text color matching the expressive slot 4 subtle background — for use on non-expressive surfaces. */
  --cds-semantic-color-text-expressive-5-on-strong: #ffffff; /** Text color for content placed on expressive slot 5 strong backgrounds. */
  --cds-semantic-color-text-expressive-5-on-subtle: #003307; /** Fill color for text on subtle expressive slot 5 surfaces. */
  --cds-semantic-color-text-expressive-5-strong: #008a14; /** Text color matching the expressive slot 5 strong background — for use on non-expressive surfaces. */
  --cds-semantic-color-text-expressive-5-subtle: #cce8d0; /** Text color matching the expressive slot 5 subtle background — for use on non-expressive surfaces. */
  --cds-semantic-color-text-feedback-error: #cc0000; /** Fill color for error state text. Used for inline validation messages and error labels. */
  --cds-semantic-color-text-feedback-on-critical: #cc0000; /** Fill color for text on critical feedback surfaces (e.g. error banners, critical alert backgrounds). */
  --cds-semantic-color-text-feedback-on-destructive: #ffe7e2; /** Fill color for text on destructive feedback surfaces (e.g. destructive action confirmation banners). */
  --cds-semantic-color-text-feedback-on-neutral: #333333; /** Fill color for text on neutral feedback surfaces (e.g. informational banners and toasts). */
  --cds-semantic-color-text-feedback-on-success: #333333; /** Fill color for text on success feedback surfaces (e.g. success banners and toasts). */
  --cds-semantic-color-text-feedback-on-warning: #333333; /** Fill color for text on warning feedback surfaces (e.g. warning banners and toasts). */
  --cds-semantic-color-text-highlight: #0a893d; /** Fill color for highlighted text, such as search result matches or emphasised inline content. */
  --cds-semantic-color-text-inverse: #ffffff; /** Fill color for text placed on dark or inverted backgrounds. */
  --cds-semantic-color-text-member-on-strong: #daf5ce; /** Text colour for content placed on color/background/member/strong. */
  --cds-semantic-color-text-member-on-subtle: #0a893d; /** Text colour for content placed on color/background/member/subtle. */
  --cds-semantic-color-text-on-promo-1: #fff000; /** Text colour for content placed on a color/background/promo/1 surface. */
  --cds-semantic-color-text-on-promo-2: #cc0000; /** Text colour for content placed on a color/background/promo/2 surface. */
  --cds-semantic-color-text-pricing-on-discount: #cc0000; /** Fill color for text on discount pricing badge surfaces. */
  --cds-semantic-color-text-pricing-on-member: #ffffff; /** Fill color for text on member pricing badge surfaces. */
  --cds-semantic-color-text-primary: #333333; /** Fill color for primary body text and headings. Default text color for most content. */
  --cds-semantic-color-text-secondary: #616161; /** Fill color for secondary (subdued) text. Used for supporting content, captions, and metadata. */
  --cds-semantic-color-text-tertiary: #003a27; /** Fill color for tertiary text. Used for placeholder text and least-prominent labels. */
  --cds-semantic-typography-accent-font-family: Coop New; /** ID26 brand theme token. Font family used for accent/script text in the ID26 brand. */
  --cds-semantic-typography-accent-font-size-lg: 2rem; /** ID26 brand theme token. Font size for large accent/script text in the ID26 type scale. */
  --cds-semantic-typography-accent-font-size-md: 1.5rem; /** ID26 brand theme token. Font size for medium accent/script text in the ID26 type scale. */
  --cds-semantic-typography-accent-font-size-sm: 1rem; /** ID26 brand theme token. Font size for small accent/script text in the ID26 type scale. */
  --cds-semantic-typography-accent-font-size-xlg: 3rem; /** ID26 brand theme token. Font size for xLarge accent/script text in the ID26 type scale. */
  --cds-semantic-typography-accent-font-weight-regular: 800; /** ID26 brand theme token. Regular font weight for accent/script text in the ID26 type scale. */
  --cds-semantic-typography-accent-letter-spacing: 0px; /** ID26 brand theme token. Letter spacing applied to accent/script text in the ID26 type scale. */
  --cds-semantic-typography-accent-line-height-lg: 2rem; /** ID26 brand theme token. Line height for large accent/script text in the ID26 type scale. */
  --cds-semantic-typography-accent-line-height-md: 1.5rem; /** ID26 brand theme token. Line height for medium accent/script text in the ID26 type scale. */
  --cds-semantic-typography-accent-line-height-sm: 1rem; /** ID26 brand theme token. Line height for small accent/script text in the ID26 type scale. */
  --cds-semantic-typography-accent-line-height-xlg: 3rem; /** ID26 brand theme token. Line height for xLarge accent/script text in the ID26 type scale. */
  --cds-semantic-typography-accent-rotation: 0deg; /** Rotation angle for the accent typography style, defining the characteristic tilt applied to accent and script text in the ID26 brand. */
  --cds-semantic-typography-body-link-font-family: AkkuratStd; /** ID26 brand theme token. Font family used for body link text in the ID26 brand. */
  --cds-semantic-typography-body-link-font-size-lg: 1.125rem; /** ID26 brand theme token. Font size for large body link text in the ID26 type scale. */
  --cds-semantic-typography-body-link-font-size-md: 1rem; /** ID26 brand theme token. Font size for medium body link text in the ID26 type scale. */
  --cds-semantic-typography-body-link-font-size-sm: 0.875rem; /** ID26 brand theme token. Font size for small body link text in the ID26 type scale. */
  --cds-semantic-typography-body-link-font-weight-bold: 600; /** ID26 brand theme token. Bold font weight for body link text in the ID26 type scale. */
  --cds-semantic-typography-body-link-font-weight-regular: 400; /** ID26 brand theme token. Regular font weight for body link text in the ID26 type scale. */
  --cds-semantic-typography-body-link-letter-spacing: 0px; /** ID26 brand theme token. Letter spacing applied to body link text in the ID26 type scale. */
  --cds-semantic-typography-body-link-line-height-lg: 1.4625rem; /** ID26 brand theme token. Line height for large body link text in the ID26 type scale. */
  --cds-semantic-typography-body-link-line-height-md: 1.3rem; /** ID26 brand theme token. Line height for medium body link text in the ID26 type scale. */
  --cds-semantic-typography-body-link-line-height-sm: 1.1375rem; /** ID26 brand theme token. Line height for small body link text in the ID26 type scale. */
  --cds-semantic-typography-body-font-family: AkkuratStd; /** ID26 brand theme token. Font family used for body-scale type in the ID26 brand. */
  --cds-semantic-typography-body-font-size-lg: 1.125rem; /** ID26 brand theme token. Font size for large body text in the ID26 type scale. */
  --cds-semantic-typography-body-font-size-md: 1rem; /** ID26 brand theme token. Font size for medium body text in the ID26 type scale. */
  --cds-semantic-typography-body-font-size-sm: 0.875rem; /** ID26 brand theme token. Font size for small body text in the ID26 type scale. */
  --cds-semantic-typography-body-font-weight-bold: 600; /** ID26 brand theme token. Bold font weight for body text in the ID26 type scale. */
  --cds-semantic-typography-body-font-weight-regular: 400; /** ID26 brand theme token. Regular font weight for body text in the ID26 type scale. */
  --cds-semantic-typography-body-letter-spacing: 0px; /** ID26 brand theme token. Letter spacing applied to body text in the ID26 type scale. */
  --cds-semantic-typography-body-line-height-lg: 1.4625rem; /** ID26 brand theme token. Line height for large body text in the ID26 type scale. */
  --cds-semantic-typography-body-line-height-md: 1.3rem; /** ID26 brand theme token. Line height for medium body text in the ID26 type scale. */
  --cds-semantic-typography-body-line-height-sm: 1.1375rem; /** ID26 brand theme token. Line height for small body text in the ID26 type scale. */
  --cds-semantic-typography-display-font-family: Coop New; /** ID26 brand theme token. Font family used for display-scale type in the ID26 brand. */
  --cds-semantic-typography-display-font-size-lg: 3rem; /** ID26 brand theme token. Font size for large display text in the ID26 type scale. */
  --cds-semantic-typography-display-font-size-md: 2rem; /** ID26 brand theme token. Font size for medium display text in the ID26 type scale. */
  --cds-semantic-typography-display-font-size-sm: 1.5rem; /** ID26 brand theme token. Font size for small display text in the ID26 type scale. */
  --cds-semantic-typography-display-font-size-xlg: 3.75rem; /** ID26 brand theme token. Font size for xlarge display text in the ID26 type scale. */
  --cds-semantic-typography-display-font-weight-black: 800; /** ID26 brand theme token. Black (heaviest) font weight for display text in the ID26 type scale. */
  --cds-semantic-typography-display-font-weight-bold: 600; /** ID26 brand theme token. Bold font weight for display text in the ID26 type scale. */
  --cds-semantic-typography-display-font-weight-regular: 400; /** ID26 brand theme token. Regular font weight for display text in the ID26 type scale. */
  --cds-semantic-typography-display-letter-spacing: 0px; /** ID26 brand theme token. Letter spacing applied to display text in the ID26 type scale. */
  --cds-semantic-typography-display-line-height-lg: 3rem; /** ID26 brand theme token. Line height for large display text in the ID26 type scale. */
  --cds-semantic-typography-display-line-height-md: 2rem; /** ID26 brand theme token. Line height for medium display text in the ID26 type scale. */
  --cds-semantic-typography-display-line-height-sm: 1.5rem; /** ID26 brand theme token. Line height for small display text in the ID26 type scale. */
  --cds-semantic-typography-display-line-height-xlg: 3.75rem; /** ID26 brand theme token. Line height for xlarge display text in the ID26 type scale. */
  --cds-semantic-typography-header-font-family: AkkuratStd; /** ID26 brand theme token. Font family used for header-scale type in the ID26 brand. */
  --cds-semantic-typography-header-font-size-lg: 1.5rem; /** ID26 brand theme token. Font size for large header text in the ID26 type scale. */
  --cds-semantic-typography-header-font-size-md: 1.125rem; /** ID26 brand theme token. Font size for medium header text in the ID26 type scale. */
  --cds-semantic-typography-header-font-size-sm: 1rem; /** ID26 brand theme token. Font size for small header text in the ID26 type scale. */
  --cds-semantic-typography-header-font-weight-bold: 600; /** ID26 brand theme token. Bold font weight for header text in the ID26 type scale. */
  --cds-semantic-typography-header-font-weight-regular: 400; /** ID26 brand theme token. Regular font weight for header text in the ID26 type scale. */
  --cds-semantic-typography-header-letter-spacing: 0px; /** ID26 brand theme token. Letter spacing applied to header text in the ID26 type scale. */
  --cds-semantic-typography-header-line-height-lg: 1.8rem; /** ID26 brand theme token. Line height for large header text in the ID26 type scale. */
  --cds-semantic-typography-header-line-height-md: 1.35rem; /** ID26 brand theme token. Line height for medium header text in the ID26 type scale. */
  --cds-semantic-typography-header-line-height-sm: 1.2rem; /** ID26 brand theme token. Line height for small header text in the ID26 type scale. */
  --cds-semantic-typography-intro-font-family: AkkuratStd; /** ID26 brand theme token. Font family used for intro-scale type in the ID26 brand. */
  --cds-semantic-typography-intro-font-size-lg: 1.5rem; /** ID26 brand theme token. Font size for large intro text in the ID26 type scale. */
  --cds-semantic-typography-intro-font-size-md: 1.25rem; /** ID26 brand theme token. Font size for medium intro text in the ID26 type scale. */
  --cds-semantic-typography-intro-font-size-sm: 1.125rem; /** ID26 brand theme token. Font size for small intro text in the ID26 type scale. */
  --cds-semantic-typography-intro-font-weight-regular: 400; /** ID26 brand theme token. Regular font weight for intro text in the ID26 type scale. */
  --cds-semantic-typography-intro-letter-spacing: 0px; /** ID26 brand theme token. Letter spacing applied to intro text in the ID26 type scale. */
  --cds-semantic-typography-intro-line-height-lg: 1.95rem; /** ID26 brand theme token. Line height for large intro text in the ID26 type scale. */
  --cds-semantic-typography-intro-line-height-md: 1.625rem; /** ID26 brand theme token. Line height for medium intro text in the ID26 type scale. */
  --cds-semantic-typography-intro-line-height-sm: 1.4625rem; /** ID26 brand theme token. Line height for small intro text in the ID26 type scale. */
  --cds-semantic-typography-pricing-font-family: Coop New; /** ID26 brand theme token. Font family used for pricing text in the ID26 brand. */
  --cds-semantic-typography-pricing-font-size-2xlg: 3.75rem; /** ID26 brand theme token. Font size for 2xlarge pricing text in the ID26 type scale. */
  --cds-semantic-typography-pricing-font-size-lg: 2rem; /** ID26 brand theme token. Font size for large pricing text in the ID26 type scale. */
  --cds-semantic-typography-pricing-font-size-md: 1.25rem; /** ID26 brand theme token. Font size for medium pricing text in the ID26 type scale. */
  --cds-semantic-typography-pricing-font-size-sm: 1rem; /** ID26 brand theme token. Font size for small pricing text in the ID26 type scale. */
  --cds-semantic-typography-pricing-font-size-xlg: 3rem; /** ID26 brand theme token. Font size for xlarge pricing text in the ID26 type scale. */
  --cds-semantic-typography-pricing-font-size-xsm: 0.875rem; /** ID26 brand theme token. Font size for xsmall pricing text in the ID26 type scale. */
  --cds-semantic-typography-pricing-font-weight-bold: 800; /** ID26 brand theme token. Bold font weight for pricing text in the ID26 type scale. */
  --cds-semantic-typography-pricing-letter-spacing: 0px; /** ID26 brand theme token. Letter spacing applied to pricing text in the ID26 type scale. */
  --cds-semantic-typography-pricing-line-height-2xlg: 3.75rem; /** ID26 brand theme token. Line height for 2xlarge pricing text in the ID26 type scale. */
  --cds-semantic-typography-pricing-line-height-lg: 2rem; /** ID26 brand theme token. Line height for large pricing text in the ID26 type scale. */
  --cds-semantic-typography-pricing-line-height-md: 1.25rem; /** ID26 brand theme token. Line height for medium pricing text in the ID26 type scale. */
  --cds-semantic-typography-pricing-line-height-sm: 1rem; /** ID26 brand theme token. Line height for small pricing text in the ID26 type scale. */
  --cds-semantic-typography-pricing-line-height-xlg: 3rem; /** ID26 brand theme token. Line height for xlarge pricing text in the ID26 type scale. */
  --cds-semantic-typography-pricing-line-height-xsm: 0.875rem; /** ID26 brand theme token. Line height for xsmall pricing text in the ID26 type scale. */
  --cds-border-radius-2xsm: 4px; /** 2x-small corner radius step. Applied to subtle rounding on small elements such as thumbnails and badges. */
  --cds-border-radius-full: 9999999px; /** Fully rounded corner radius. Applied to pill-shaped elements such as badges and toggles. */
  --cds-border-radius-lg: 24px; /** Large corner radius step. Applied to prominent cards and overlay containers. */
  --cds-border-radius-md: 16px; /** Medium corner radius step. Applied to standard cards, modals, and panel containers. */
  --cds-border-radius-none: 0px; /** No corner radius. Applied to elements that require sharp, square corners. */
  --cds-border-radius-sm: 12px; /** Small corner radius step. Applied to modestly rounded UI elements such as chips and tags. */
  --cds-border-radius-xlg: 40px; /** Extra-large corner radius step. Applied to highly rounded containers and feature card surfaces. */
  --cds-border-radius-xsm: 8px; /** Extra-small corner radius step. Applied to lightly rounded elements such as input fields and small containers. */
  --cds-border-width-default: 1px; /** Default border width for standard outlined elements such as inputs, cards, and containers. */
  --cds-border-width-divider: 1px; /** Border width for divider lines that separate sections or list items. */
  --cds-border-width-focus: 2px; /** Border width for focus ring outlines on interactive elements. */
  --cds-border-width-strong: 2px; /** Strong border width for emphasized outlines, selection states, and high-contrast borders. */
  --cds-sizing-2xlg: 64px; /** 2x-large step in the sizing scale. Used for large display elements and hero components. */
  --cds-sizing-2xsm: 16px; /** 2x-small step in the sizing scale. Used for very compact UI elements such as small icons and indicators. */
  --cds-sizing-3xlg: 72px; /** 3x-large step in the sizing scale. Used for large structural elements and illustrative surfaces. */
  --cds-sizing-3xsm: 8px; /** 3x-small step in the sizing scale. Used for the smallest icon and decorative element sizes. */
  --cds-sizing-4xlg: 80px; /** 4x-large step in the sizing scale. The largest fixed sizing step, used for hero images and full-bleed display elements. */
  --cds-sizing-lg: 48px; /** Large step in the sizing scale. Used for prominent interactive element heights (e.g. large buttons, inputs). */
  --cds-sizing-md: 40px; /** Medium step in the sizing scale. Used for standard interactive element heights (e.g. medium buttons, inputs). */
  --cds-sizing-sm: 32px; /** Small step in the sizing scale. Used for compact interactive element heights (e.g. small buttons, icon buttons). */
  --cds-sizing-xlg: 56px; /** Extra-large step in the sizing scale. Used for oversized interactive or display elements. */
  --cds-sizing-xsm: 24px; /** Extra-small step in the sizing scale. Used for minimal interactive or decorative element heights. */
  --cds-spacing-2xlg: 48px; /** Spacing between objects, diffrent sections related to each other */
  --cds-spacing-2xsm: 4px; /** Small gap, and padding in elements e.g. button top and bottom */
  --cds-spacing-3xlg: 56px; /** Spacing between objects or padding */
  --cds-spacing-3xsm: 2px; /** Gap between two text objects closely related e.g. elements in tag, metadata and badges in productcard */
  --cds-spacing-4xlg: 64px; /** Spacing between objects or padding */
  --cds-spacing-lg: 24px; /** Viewport padding for tablet and desktop */
  --cds-spacing-md: 16px; /** Standard padding and gap, viewport padding for mobile devices */
  --cds-spacing-none: 0px; /** Resetting padding/margins or elements that are edge-to-edge. */
  --cds-spacing-px: 1px; /** a 1px unit */
  --cds-spacing-sm: 12px; /** Spacing between objects or padding */
  --cds-spacing-xlg: 40px; /** Viewport padding for tablet and desktop */
  --cds-spacing-xsm: 8px; /** Gap between closely related elements, text - icon spacing  */
  --cds-utility-touch-target-min: 24px; /** Minimum touch target size for interactive control elements, ensuring accessibility compliance. */
  --cds-semantic-data-viz-border-grid: 1px; /** Stroke width for background grid lines inside charts. */
  --cds-semantic-data-viz-border-line: 2px; /** Stroke width for line chart series strokes. */
  --cds-semantic-data-viz-color-background-canvas: #ffffff; /** Background of the full chart container. Apply to the outermost frame of any chart. Series colours are contrast-tested against this — do not place charts on a different background colour. */
  --cds-semantic-data-viz-color-background-tooltip: #ffffff; /** Background of the tooltip panel. Intentionally inverted — dark in light mode, light in dark mode. Always pair with text/tooltip for correct contrast. */
  --cds-semantic-data-viz-color-background-track: #fbf8f4; /** Background fill for the unfilled portion of a donut or radial chart — the ring behind the data. */
  --cds-semantic-data-viz-color-series-1-a: #a3d5ab; /** Series 1 (green) light tint — use as the shaded fill beneath an area chart line. Not contrast-validated; always pair with a visible line stroke in the same series. */
  --cds-semantic-data-viz-color-series-1-b: #299d3a; /** Series 1 (green) — main colour for data elements: bars, line strokes, pie slices, and dots. WCAG 3:1 contrast guaranteed against the canvas background. */
  --cds-semantic-data-viz-color-series-1-c: #004d0b; /** Series 1 (green) — use for active or selected states, and for data labels placed directly on the chart. WCAG 4.5:1 contrast guaranteed against the canvas background. */
  --cds-semantic-data-viz-color-series-2-a: #bae1fb; /** Series 2 (blue) light tint — use as the shaded fill beneath an area chart line. Not contrast-validated; always pair with a visible line stroke in the same series. */
  --cds-semantic-data-viz-color-series-2-b: #2792d9; /** Series 2 (blue) — main colour for data elements: bars, line strokes, pie slices, and dots. WCAG 3:1 contrast guaranteed against the canvas background. */
  --cds-semantic-data-viz-color-series-2-c: #0c5c92; /** Series 2 (blue) — use for active or selected states, and for data labels placed directly on the chart. WCAG 4.5:1 contrast guaranteed against the canvas background. */
  --cds-semantic-data-viz-color-series-3-a: #ffd1b2; /** Series 3 (orange) light tint — use as the shaded fill beneath an area chart line. Not contrast-validated; always pair with a visible line stroke in the same series. */
  --cds-semantic-data-viz-color-series-3-b: #f46404; /** Series 3 (orange) — main colour for data elements: bars, line strokes, pie slices, and dots. WCAG 3:1 contrast guaranteed against the canvas background. */
  --cds-semantic-data-viz-color-series-3-c: #9a3e00; /** Series 3 (orange) — use for active or selected states, and for data labels placed directly on the chart. WCAG 4.5:1 contrast guaranteed against the canvas background. */
  --cds-semantic-data-viz-color-series-4-a: #f4c0e7; /** Series 4 (purple) light tint — use as the shaded fill beneath an area chart line. Not contrast-validated; always pair with a visible line stroke in the same series. */
  --cds-semantic-data-viz-color-series-4-b: #d859b6; /** Series 4 (purple) — main colour for data elements: bars, line strokes, pie slices, and dots. WCAG 3:1 contrast guaranteed against the canvas background. */
  --cds-semantic-data-viz-color-series-4-c: #762962; /** Series 4 (purple) — use for active or selected states, and for data labels placed directly on the chart. WCAG 4.5:1 contrast guaranteed against the canvas background. */
  --cds-semantic-data-viz-color-series-5-a: #f1d5ad; /** Series 5 (beige) light tint — use as the shaded fill beneath an area chart line. Not contrast-validated; always pair with a visible line stroke in the same series. */
  --cds-semantic-data-viz-color-series-5-b: #ae711f; /** Series 5 (beige) — main colour for data elements: bars, line strokes, pie slices, and dots. WCAG 3:1 contrast guaranteed against the canvas background. */
  --cds-semantic-data-viz-color-series-5-c: #6c4613; /** Series 5 (beige) — use for active or selected states, and for data labels placed directly on the chart. WCAG 4.5:1 contrast guaranteed against the canvas background. */
  --cds-semantic-data-viz-color-stroke-axis: #c4b097; /** Colour for axis lines and tick marks. */
  --cds-semantic-data-viz-color-stroke-grid: #e2d8ca; /** Colour for background grid lines inside a chart. */
  --cds-semantic-data-viz-color-stroke-reference: #a5947f; /** Colour for reference lines and threshold markers overlaid on a chart. */
  --cds-semantic-data-viz-color-stroke-separator: #ffffff; /** Thin stroke for separating touching series fills — stacked bars, pie slices, and donut segments. Matches the canvas background so it reads as a gap, not a visible border. */
  --cds-semantic-data-viz-color-stroke-track: #efe9e1; /** Stroke for the unfilled portion of a donut or radial chart — the ring behind the data. */
  --cds-semantic-data-viz-color-text-annotation: #a5947f; /** Muted text colour for supporting chart text — legend labels, subtitles, and secondary axis labels. */
  --cds-semantic-data-viz-color-text-axis: #5c5347; /** Text colour for the value and category labels along chart axes. */
  --cds-semantic-data-viz-color-text-tooltip: #26221d; /** Text colour inside the tooltip panel. Always pair with background/tooltip — they are an inverted pair. */
  --cds-semantic-data-viz-color-text-value: #5c5347; /** Text colour for data labels shown directly on bars, dots, or data points. */
}

/**
 * Do not edit directly, this file was auto-generated.
 */

html.theme-id26-light {
  --cds-semantic-color-background-brand-accent: #8ef54f; /** Accent brand fill color for distinctive brand-colored highlights and decorative surfaces. */
  --cds-semantic-color-background-brand-primary: #008a14; /** Primary brand fill color for brand-colored surfaces and prominent UI regions. */
  --cds-semantic-color-background-brand-secondary: #003d09; /** Secondary brand fill color for supporting brand-colored surfaces. */
  --cds-semantic-color-background-brand-tertiary: #cce8d0; /** Tertiary brand fill color for additional brand-colored surfaces. */
  --cds-semantic-color-background-canvas: #fbf8f4; /** Main artboard / screen */
  --cds-semantic-color-background-feedback-critical: #eeaaaa; /** Background fill for critical feedback states such as error banners and alerts. */
  --cds-semantic-color-background-feedback-destructive: #d33636; /** Background fill for destructive feedback states such as deletion confirmation surfaces. */
  --cds-semantic-color-background-feedback-neutral: #fbf8f4; /** Background fill for neutral feedback states such as informational banners and alerts. */
  --cds-semantic-color-background-feedback-success: #a3d5ab; /** Background fill for success feedback states such as confirmation banners and alerts. */
  --cds-semantic-color-background-feedback-warning: #fbe204; /** Background fill for warning feedback states such as caution banners and alerts. */
  --cds-semantic-color-background-inverse: #3a332c; /** High-contrast inverse surface background for elements that flip light/dark relative to the canvas. */
  --cds-semantic-color-background-member-strong: #008a14; /** High-emphasis member surface. Pairs with color/text/member/on-strong. */
  --cds-semantic-color-background-pricing-discount: #fff349; /** Background fill for discount pricing labels and badges. */
  --cds-semantic-color-background-pricing-member: #008a14; /** Background fill for member-exclusive pricing labels and badges. */
  --cds-semantic-color-background-strong: #e2d8ca; /** High-contrast surface fill for elements that need stronger visual separation from the canvas. */
  --cds-semantic-color-background-subtle: #efe9e1; /** Secondary surface fill for low-emphasis areas layered above the canvas background. */
  --cds-semantic-color-icon-brand-accent: #8ef54f; /** Icon color in the accent brand hue, applied directly to icon elements. For icons placed on top of accent-colored surfaces, use color/icon/brand/on-accent instead. */
  --cds-semantic-color-icon-brand-on-accent: #004d0b; /** Icon color for elements placed on top of accent brand backgrounds. Ensures contrast compliance when paired with color/background/brand/accent. */
  --cds-semantic-color-icon-brand-on-tertiary: #3a332c; /** Fill color for icons on tertiary brand-colored surfaces. */
  --cds-semantic-color-icon-brand-primary: #008a14; /** Primary brand icon color for standalone brand-colored icon elements. */
  --cds-semantic-color-icon-brand-secondary: #003d09; /** Secondary brand icon color for standalone brand-colored icon elements. */
  --cds-semantic-color-icon-brand-tertiary: #cce8d0; /** Tertiary brand icon color for standalone brand-colored icon elements. */
  --cds-semantic-color-icon-feedback-error: #cc0000; /** Fill color for error state icons. Used alongside error text in validation and error states. */
  --cds-semantic-color-icon-feedback-on-critical: #6a0000; /** Fill color for icons on critical feedback surfaces (e.g. critical alert icon backgrounds). */
  --cds-semantic-color-icon-feedback-on-destructive: #fae1e1; /** Fill color for icons on destructive feedback surfaces (e.g. destructive confirmation icon backgrounds). */
  --cds-semantic-color-icon-feedback-on-neutral: #26221d; /** Fill color for icons on neutral feedback surfaces (e.g. informational alert icon backgrounds). */
  --cds-semantic-color-icon-feedback-on-success: #003307; /** Fill color for icons on success feedback surfaces (e.g. success alert icon backgrounds). */
  --cds-semantic-color-icon-feedback-on-warning: #504000; /** Fill color for icons on warning feedback surfaces (e.g. warning alert icon backgrounds). */
  --cds-semantic-color-icon-highlight: #008a14; /** Fill color for highlighted icons, used alongside highlight text in search results or emphasis contexts. */
  --cds-semantic-color-icon-pricing-on-discount: #cc0000; /** Fill color for icons on discount pricing badge surfaces. */
  --cds-semantic-color-icon-primary: #26221d; /** Fill color for primary icons. Default icon color matching primary text emphasis. */
  --cds-semantic-color-icon-secondary: #5c5347; /** Fill color for secondary (subdued) icons. Used for supporting and decorative icon instances. */
  --cds-semantic-color-interactive-background-read-only: #efe9e1; /** Background fill for interactive control elements in their read-only state. */
  --cds-semantic-color-interactive-card-icon: #005e0e; /** Icon color for icons within interactive card components. */
  --cds-semantic-color-interactive-card-text: #005e0e; /** Text color for content within interactive card components. */
  --cds-semantic-color-interactive-control-background-selection-on: #004d0b; /** Background fill for form control elements (checkbox, radio, toggle) in their selected (on) state. */
  --cds-semantic-color-interactive-control-icon: #26221d; /** Icon color for form control elements (checkbox, radio, toggle) in their default state. */
  --cds-semantic-color-interactive-control-icon-inverse-inverse: #26221d; /** Icon color for the indicator inside the switch component thumb on inverse surfaces, maintaining contrast against the thumb's inverted background. */
  --cds-semantic-color-interactive-control-indicator-off: #3a332c; /** Indicator color for form control elements (checkbox, radio, toggle) in their unselected (off) state. */
  --cds-semantic-color-interactive-control-stroke: #efe9e1; /** Border color for form control elements (checkbox, radio, toggle) in their default state. */
  --cds-semantic-color-interactive-control-stroke-hover: #e2d8ca; /** Border color for form control elements (checkbox, radio, toggle) in their hover state. */
  --cds-semantic-color-interactive-control-stroke-pressed: #e2d8ca; /** Border color for form control elements (checkbox, radio, toggle) in their pressed state. */
  --cds-semantic-color-interactive-control-text: #26221d; /** Text color for form control labels in their default state. */
  --cds-semantic-color-interactive-critical-background: #eb8e8e; /** Background fill for critical severity buttons in their default state. */
  --cds-semantic-color-interactive-critical-background-hover: #eb8e8e; /** Background fill for critical severity buttons in their hover state. */
  --cds-semantic-color-interactive-critical-background-pressed: #cc0000; /** Background fill for critical severity buttons in their pressed state. */
  --cds-semantic-color-interactive-critical-icon: #6a0000; /** Icon color for critical severity button icons. */
  --cds-semantic-color-interactive-critical-stroke-pressed: #6a0000; /** Border color for critical severity buttons in their pressed state. */
  --cds-semantic-color-interactive-critical-text: #6a0000; /** Text color for critical severity button labels. */
  --cds-semantic-color-interactive-destructive-background: #cc0000; /** Background fill for destructive action buttons in their default state. */
  --cds-semantic-color-interactive-destructive-background-hover: #cc0000; /** Background fill for destructive action buttons in their hover state. */
  --cds-semantic-color-interactive-destructive-background-pressed: #eeaaaa; /** Background fill for destructive action buttons in their pressed state. */
  --cds-semantic-color-interactive-destructive-stroke-pressed: #490000; /** Border color for destructive action buttons in their pressed state. */
  --cds-semantic-color-interactive-icon-read-only: #857867; /** Icon color for interactive control elements in their read-only state. */
  --cds-semantic-color-interactive-inverse-background: #3a332c; /** Background fill for inverse buttons in their default state. */
  --cds-semantic-color-interactive-inverse-background-hover: #3a332c; /** Background fill for inverse buttons in their hover state. */
  --cds-semantic-color-interactive-inverse-background-pressed: #3a332c; /** Background fill for inverse buttons in their pressed state. */
  --cds-semantic-color-interactive-inverse-icon: #ffffff; /** Icon color for inverse button icons. */
  --cds-semantic-color-interactive-inverse-stroke: #857867; /** Border color for inverse buttons in their default state. */
  --cds-semantic-color-interactive-inverse-stroke-hover: #857867; /** Border color for inverse buttons in their hover state. */
  --cds-semantic-color-interactive-inverse-stroke-pressed: #857867; /** Border color for inverse buttons in their pressed state. */
  --cds-semantic-color-interactive-inverse-text: #ffffff; /** Text color for inverse button labels. */
  --cds-semantic-color-interactive-link-text: #26221d; /** Text color for link interactive elements in their default state. */
  --cds-semantic-color-interactive-link-text-visited: #26221d; /** Text color for link interactive elements that have been previously visited. */
  --cds-semantic-color-interactive-outlined-subtle-icon: #e2d8ca; /** Icon color for outlined-subtle button icons. */
  --cds-semantic-color-interactive-outlined-subtle-stroke: #e2d8ca; /** Border color for outlined-subtle buttons in their default state. */
  --cds-semantic-color-interactive-outlined-subtle-stroke-hover: #e2d8ca; /** Border color for outlined-subtle buttons in their hover state. */
  --cds-semantic-color-interactive-outlined-subtle-stroke-pressed: #e2d8ca; /** Border color for outlined-subtle buttons in their pressed state. */
  --cds-semantic-color-interactive-outlined-subtle-text: #e2d8ca; /** Text color for outlined-subtle button labels. */
  --cds-semantic-color-interactive-outlined-icon: #3a332c; /** Icon color for outlined button icons. */
  --cds-semantic-color-interactive-outlined-stroke: #3a332c; /** Border color for outlined buttons in their default state. */
  --cds-semantic-color-interactive-outlined-stroke-hover: #3a332c; /** Border color for outlined buttons in their hover state. */
  --cds-semantic-color-interactive-outlined-stroke-pressed: #3a332c; /** Border color for outlined buttons in their pressed state. */
  --cds-semantic-color-interactive-outlined-text: #3a332c; /** Text color for outlined button labels. */
  --cds-semantic-color-interactive-primary-background: #008a14; /** Background fill for primary action buttons in their default state. */
  --cds-semantic-color-interactive-primary-background-hover: #008a14; /** Background fill for primary action buttons in their hover state. */
  --cds-semantic-color-interactive-primary-background-pressed: #008a14; /** Background fill for primary action buttons in their pressed state. */
  --cds-semantic-color-interactive-primary-stroke-pressed: #004d0b; /** Border color for primary action buttons in their pressed state. */
  --cds-semantic-color-interactive-secondary-background: #a3d5ab; /** Background fill for secondary action buttons in their default state. */
  --cds-semantic-color-interactive-secondary-background-hover: #a3d5ab; /** Background fill for secondary action buttons in their hover state. */
  --cds-semantic-color-interactive-secondary-background-pressed: #a3d5ab; /** Background fill for secondary action buttons in their pressed state. */
  --cds-semantic-color-interactive-secondary-icon: #004d0b; /** Icon color for secondary action button icons. */
  --cds-semantic-color-interactive-secondary-text: #004d0b; /** Text color for secondary action button labels. */
  --cds-semantic-color-interactive-stroke-read-only: #e2d8ca; /** Border color for interactive control elements in their read-only state. */
  --cds-semantic-color-interactive-subtle-background: #fbf8f4; /** Background fill for subtle (low-emphasis) interactive buttons in their default state. */
  --cds-semantic-color-interactive-subtle-background-hover: #fbf8f4; /** Background fill for subtle (low-emphasis) interactive buttons in their hover state. */
  --cds-semantic-color-interactive-subtle-background-pressed: #fbf8f4; /** Background fill for subtle (low-emphasis) interactive buttons in their pressed state. */
  --cds-semantic-color-interactive-subtle-icon: #3a332c; /** Icon color for subtle (low-emphasis) interactive button icons. */
  --cds-semantic-color-interactive-subtle-stroke: #e2d8ca; /** Border color for subtle (low-emphasis) interactive buttons in their default state. */
  --cds-semantic-color-interactive-subtle-stroke-hover: #e2d8ca; /** Border color for subtle (low-emphasis) interactive buttons in their hover state. */
  --cds-semantic-color-interactive-subtle-stroke-pressed: #e2d8ca; /** Border color for subtle (low-emphasis) interactive buttons in their pressed state. */
  --cds-semantic-color-interactive-subtle-text: #3a332c; /** Text color for subtle (low-emphasis) interactive button labels. */
  --cds-semantic-color-interactive-text-read-only: #857867; /** Text color for interactive control elements in their read-only state. */
  --cds-semantic-color-stroke-brand-accent: #8ef54f; /** Brand border color applied on top of accent brand-colored surfaces. */
  --cds-semantic-color-stroke-brand-on-accent: #8ef54f; /** Brand border color applied on top of accent-colored surfaces where the accent sits on a contrasting background. */
  --cds-semantic-color-stroke-brand-on-primary: #008a14; /** Brand border color applied on top of primary brand-colored surfaces. */
  --cds-semantic-color-stroke-brand-on-secondary: #857867; /** Brand border color applied on top of secondary brand-colored surfaces. */
  --cds-semantic-color-stroke-brand-on-tertiary: #a3d5ab; /** Brand border color applied on top of tertiary brand-colored surfaces. */
  --cds-semantic-color-stroke-divider: #cebda7; /** Horizontal rule border color for separating content sections within a page or component. */
  --cds-semantic-color-stroke-feedback-critical: #eb8e8e; /** Stroke color for critical warning states — signals a severe or blocking situation requiring immediate attention. Not for form validation errors; use color/stroke/feedback/error for those. */
  --cds-semantic-color-stroke-feedback-error: #cc0000; /** Stroke color for form validation errors — applied to input field borders when user-submitted data fails validation. */
  --cds-semantic-color-stroke-feedback-neutral: #d7c9b8; /** Border color for neutral feedback states such as informational input fields and alert outlines. */
  --cds-semantic-color-stroke-feedback-success: #a3d5ab; /** Border color for success feedback states such as valid input fields and confirmation outlines. */
  --cds-semantic-color-stroke-feedback-warning: #d5b800; /** Border color for warning feedback states such as caution input fields and alert outlines. */
  --cds-semantic-color-stroke-highlight: #008a14; /** Stroke color for selected or highlighted elements, such as selected item indicators and accent borders. Broadly applicable for any visual marking or selection state. */
  --cds-semantic-color-stroke-pricing-discount: #fff349; /** Border color for discount pricing labels and badges. */
  --cds-semantic-color-stroke-pricing-member: #52af60; /** Border color for member-exclusive pricing labels and badges. */
  --cds-semantic-color-stroke-strong: #d7c9b8; /** High-emphasis border color for prominent outlines on interactive elements such as focused inputs and selected states. */
  --cds-semantic-color-stroke-subtle: #e2d8ca; /** Low-emphasis border color for subtle dividers and understated outlines on interactive and static elements. */
  --cds-semantic-color-text-brand-accent: #8ef54f; /** Text color in the accent brand hue, applied directly to text elements. For text placed on top of accent-colored backgrounds, use color/text/brand/on-accent instead. */
  --cds-semantic-color-text-brand-on-accent: #004d0b; /** Text color for content placed on top of accent brand backgrounds. Ensures WCAG contrast compliance when paired with color/background/brand/accent. */
  --cds-semantic-color-text-brand-on-primary: #ffffff; /** Fill color for text on primary brand-colored surfaces (e.g. primary buttons, primary badges). */
  --cds-semantic-color-text-brand-on-secondary: #ffffff; /** Fill color for text on secondary brand-colored surfaces (e.g. secondary buttons, secondary badges). */
  --cds-semantic-color-text-brand-on-tertiary: #3a332c; /** Fill color for text on tertiary brand-colored surfaces. */
  --cds-semantic-color-text-feedback-error: #cc0000; /** Fill color for error state text. Used for inline validation messages and error labels. */
  --cds-semantic-color-text-feedback-on-critical: #6a0000; /** Fill color for text on critical feedback surfaces (e.g. error banners, critical alert backgrounds). */
  --cds-semantic-color-text-feedback-on-destructive: #fae1e1; /** Fill color for text on destructive feedback surfaces (e.g. destructive action confirmation banners). */
  --cds-semantic-color-text-feedback-on-neutral: #26221d; /** Fill color for text on neutral feedback surfaces (e.g. informational banners and toasts). */
  --cds-semantic-color-text-feedback-on-success: #003307; /** Fill color for text on success feedback surfaces (e.g. success banners and toasts). */
  --cds-semantic-color-text-feedback-on-warning: #504000; /** Fill color for text on warning feedback surfaces (e.g. warning banners and toasts). */
  --cds-semantic-color-text-highlight: #008a14; /** Fill color for highlighted text, such as search result matches or emphasised inline content. */
  --cds-semantic-color-text-member-on-subtle: #008a14; /** Text colour for content placed on color/background/member/subtle. */
  --cds-semantic-color-text-pricing-on-discount: #cc0000; /** Fill color for text on discount pricing badge surfaces. */
  --cds-semantic-color-text-primary: #26221d; /** Fill color for primary body text and headings. Default text color for most content. */
  --cds-semantic-color-text-secondary: #5c5347; /** Fill color for secondary (subdued) text. Used for supporting content, captions, and metadata. */
  --cds-semantic-color-text-tertiary: #003d09; /** Fill color for tertiary text. Used for placeholder text and least-prominent labels. */
  --cds-semantic-typography-accent-font-family: Coop Marker; /** ID26 brand theme token. Font family used for accent/script text in the ID26 brand. */
  --cds-semantic-typography-accent-font-weight-regular: 400; /** ID26 brand theme token. Regular font weight for accent/script text in the ID26 type scale. */
  --cds-semantic-typography-accent-rotation: 8deg; /** Rotation angle for the accent typography style, defining the characteristic tilt applied to accent and script text in the ID26 brand. */
  --cds-semantic-typography-body-link-font-family: Coop Sans Variable; /** ID26 brand theme token. Font family used for body link text in the ID26 brand. */
  --cds-semantic-typography-body-link-font-weight-bold: 600; /** ID26 brand theme token. Bold font weight for body link text in the ID26 type scale. */
  --cds-semantic-typography-body-font-family: Coop Sans Variable; /** ID26 brand theme token. Font family used for body-scale type in the ID26 brand. */
  --cds-semantic-typography-body-font-weight-bold: 600; /** ID26 brand theme token. Bold font weight for body text in the ID26 type scale. */
  --cds-semantic-typography-display-font-family: Coop Sans Variable; /** ID26 brand theme token. Font family used for display-scale type in the ID26 brand. */
  --cds-semantic-typography-display-font-weight-black: 900; /** ID26 brand theme token. Black (heaviest) font weight for display text in the ID26 type scale. */
  --cds-semantic-typography-display-font-weight-bold: 700; /** ID26 brand theme token. Bold font weight for display text in the ID26 type scale. */
  --cds-semantic-typography-header-font-family: Coop Sans Variable; /** ID26 brand theme token. Font family used for header-scale type in the ID26 brand. */
  --cds-semantic-typography-header-font-weight-bold: 700; /** ID26 brand theme token. Bold font weight for header text in the ID26 type scale. */
  --cds-semantic-typography-intro-font-family: Coop Sans Variable; /** ID26 brand theme token. Font family used for intro-scale type in the ID26 brand. */
  --cds-semantic-typography-pricing-font-family: Coop Sans Variable; /** ID26 brand theme token. Font family used for pricing text in the ID26 brand. */
  --cds-semantic-typography-pricing-font-weight-bold: 900; /** ID26 brand theme token. Bold font weight for pricing text in the ID26 type scale. */
  --cds-border-radius-2xsm: 4px; /** 2x-small corner radius step. Applied to subtle rounding on small elements such as thumbnails and badges. */
  --cds-border-radius-full: 9999999px; /** Fully rounded corner radius. Applied to pill-shaped elements such as badges and toggles. */
  --cds-border-radius-lg: 24px; /** Large corner radius step. Applied to prominent cards and overlay containers. */
  --cds-border-radius-md: 16px; /** Medium corner radius step. Applied to standard cards, modals, and panel containers. */
  --cds-border-radius-none: 0px; /** No corner radius. Applied to elements that require sharp, square corners. */
  --cds-border-radius-sm: 12px; /** Small corner radius step. Applied to modestly rounded UI elements such as chips and tags. */
  --cds-border-radius-xlg: 40px; /** Extra-large corner radius step. Applied to highly rounded containers and feature card surfaces. */
  --cds-border-radius-xsm: 8px; /** Extra-small corner radius step. Applied to lightly rounded elements such as input fields and small containers. */
  --cds-border-width-default: 1px; /** Default border width for standard outlined elements such as inputs, cards, and containers. */
  --cds-border-width-divider: 1px; /** Border width for divider lines that separate sections or list items. */
  --cds-border-width-focus: 2px; /** Border width for focus ring outlines on interactive elements. */
  --cds-border-width-strong: 2px; /** Strong border width for emphasized outlines, selection states, and high-contrast borders. */
  --cds-sizing-2xlg: 64px; /** 2x-large step in the sizing scale. Used for large display elements and hero components. */
  --cds-sizing-2xsm: 16px; /** 2x-small step in the sizing scale. Used for very compact UI elements such as small icons and indicators. */
  --cds-sizing-3xlg: 72px; /** 3x-large step in the sizing scale. Used for large structural elements and illustrative surfaces. */
  --cds-sizing-3xsm: 8px; /** 3x-small step in the sizing scale. Used for the smallest icon and decorative element sizes. */
  --cds-sizing-4xlg: 80px; /** 4x-large step in the sizing scale. The largest fixed sizing step, used for hero images and full-bleed display elements. */
  --cds-sizing-lg: 48px; /** Large step in the sizing scale. Used for prominent interactive element heights (e.g. large buttons, inputs). */
  --cds-sizing-md: 40px; /** Medium step in the sizing scale. Used for standard interactive element heights (e.g. medium buttons, inputs). */
  --cds-sizing-sm: 32px; /** Small step in the sizing scale. Used for compact interactive element heights (e.g. small buttons, icon buttons). */
  --cds-sizing-xlg: 56px; /** Extra-large step in the sizing scale. Used for oversized interactive or display elements. */
  --cds-sizing-xsm: 24px; /** Extra-small step in the sizing scale. Used for minimal interactive or decorative element heights. */
  --cds-spacing-2xlg: 48px; /** Spacing between objects, diffrent sections related to each other */
  --cds-spacing-2xsm: 4px; /** Small gap, and padding in elements e.g. button top and bottom */
  --cds-spacing-3xlg: 56px; /** Spacing between objects or padding */
  --cds-spacing-3xsm: 2px; /** Gap between two text objects closely related e.g. elements in tag, metadata and badges in productcard */
  --cds-spacing-4xlg: 64px; /** Spacing between objects or padding */
  --cds-spacing-lg: 24px; /** Viewport padding for tablet and desktop */
  --cds-spacing-md: 16px; /** Standard padding and gap, viewport padding for mobile devices */
  --cds-spacing-none: 0px; /** Resetting padding/margins or elements that are edge-to-edge. */
  --cds-spacing-px: 1px; /** a 1px unit */
  --cds-spacing-sm: 12px; /** Spacing between objects or padding */
  --cds-spacing-xlg: 40px; /** Viewport padding for tablet and desktop */
  --cds-spacing-xsm: 8px; /** Gap between closely related elements, text - icon spacing  */
  --cds-utility-touch-target-min: 24px; /** Minimum touch target size for interactive control elements, ensuring accessibility compliance. */
}

/**
 * Do not edit directly, this file was auto-generated.
 */

html.theme-id26-dark {
  --cds-semantic-color-background-brand-accent: #8ef54f; /** Accent brand fill color for distinctive brand-colored highlights and decorative surfaces. */
  --cds-semantic-color-background-brand-primary: #008a14; /** Primary brand fill color for brand-colored surfaces and prominent UI regions. */
  --cds-semantic-color-background-brand-secondary: #005e0e; /** Secondary brand fill color for supporting brand-colored surfaces. */
  --cds-semantic-color-background-brand-tertiary: #a3d5ab; /** Tertiary brand fill color for additional brand-colored surfaces. */
  --cds-semantic-color-background-canvas: #000000; /** Main artboard / screen */
  --cds-semantic-color-background-elevated: #26221d; /** Modals, fly in, sheets. Tied to Z-index. */
  --cds-semantic-color-background-feedback-critical: #eb8e8e; /** Background fill for critical feedback states such as error banners and alerts. */
  --cds-semantic-color-background-feedback-destructive: #cc0000; /** Background fill for destructive feedback states such as deletion confirmation surfaces. */
  --cds-semantic-color-background-feedback-neutral: #efe9e1; /** Background fill for neutral feedback states such as informational banners and alerts. */
  --cds-semantic-color-background-feedback-success: #7ac285; /** Background fill for success feedback states such as confirmation banners and alerts. */
  --cds-semantic-color-background-feedback-warning: #fbe204; /** Background fill for warning feedback states such as caution banners and alerts. */
  --cds-semantic-color-background-inverse: #fbf8f4; /** High-contrast inverse surface background for elements that flip light/dark relative to the canvas. */
  --cds-semantic-color-background-member-strong: #008a14; /** High-emphasis member surface. Pairs with color/text/member/on-strong. */
  --cds-semantic-color-background-pricing-discount: #fff349; /** Background fill for discount pricing labels and badges. */
  --cds-semantic-color-background-pricing-member: #008a14; /** Background fill for member-exclusive pricing labels and badges. */
  --cds-semantic-color-background-sheet: #26221d; /** Background fill for bottom sheets and slide-in drawer panels. */
  --cds-semantic-color-background-strong: #5c5347; /** High-contrast surface fill for elements that need stronger visual separation from the canvas. */
  --cds-semantic-color-background-subtle: #3a332c; /** Secondary surface fill for low-emphasis areas layered above the canvas background. */
  --cds-semantic-color-icon-brand-accent: #8ef54f; /** Icon color in the accent brand hue, applied directly to icon elements. For icons placed on top of accent-colored surfaces, use color/icon/brand/on-accent instead. */
  --cds-semantic-color-icon-brand-on-accent: #004d0b; /** Icon color for elements placed on top of accent brand backgrounds. Ensures contrast compliance when paired with color/background/brand/accent. */
  --cds-semantic-color-icon-brand-on-tertiary: #3a332c; /** Fill color for icons on tertiary brand-colored surfaces. */
  --cds-semantic-color-icon-brand-primary: #008a14; /** Primary brand icon color for standalone brand-colored icon elements. */
  --cds-semantic-color-icon-brand-secondary: #005e0e; /** Secondary brand icon color for standalone brand-colored icon elements. */
  --cds-semantic-color-icon-brand-tertiary: #a3d5ab; /** Tertiary brand icon color for standalone brand-colored icon elements. */
  --cds-semantic-color-icon-feedback-error: #eb8e8e; /** Fill color for error state icons. Used alongside error text in validation and error states. */
  --cds-semantic-color-icon-feedback-on-critical: #490000; /** Fill color for icons on critical feedback surfaces (e.g. critical alert icon backgrounds). */
  --cds-semantic-color-icon-feedback-on-destructive: #eb8e8e; /** Fill color for icons on destructive feedback surfaces (e.g. destructive confirmation icon backgrounds). */
  --cds-semantic-color-icon-feedback-on-neutral: #26221d; /** Fill color for icons on neutral feedback surfaces (e.g. informational alert icon backgrounds). */
  --cds-semantic-color-icon-feedback-on-success: #003307; /** Fill color for icons on success feedback surfaces (e.g. success alert icon backgrounds). */
  --cds-semantic-color-icon-feedback-on-warning: #504000; /** Fill color for icons on warning feedback surfaces (e.g. warning alert icon backgrounds). */
  --cds-semantic-color-icon-highlight: #52af60; /** Fill color for highlighted icons, used alongside highlight text in search results or emphasis contexts. */
  --cds-semantic-color-icon-inverse: #003d09; /** Fill color for icons placed on dark or inverted backgrounds. */
  --cds-semantic-color-icon-pricing-on-discount: #eb8e8e; /** Fill color for icons on discount pricing badge surfaces. */
  --cds-semantic-color-icon-primary: #ffffff; /** Fill color for primary icons. Default icon color matching primary text emphasis. */
  --cds-semantic-color-icon-secondary: #e2d8ca; /** Fill color for secondary (subdued) icons. Used for supporting and decorative icon instances. */
  --cds-semantic-color-interactive-background-read-only: #5c5347; /** Background fill for interactive control elements in their read-only state. */
  --cds-semantic-color-interactive-card-background: #26221d; /** Background fill for interactive card components in their default state. */
  --cds-semantic-color-interactive-card-background-hover: #26221d; /** Background fill for interactive card components in their hover state. */
  --cds-semantic-color-interactive-card-background-pressed: #26221d; /** Background fill for interactive card components in their pressed state. */
  --cds-semantic-color-interactive-control-background: #5c5347; /** Background fill for form control elements in their default state. */
  --cds-semantic-color-interactive-control-background-hover: #857867; /** Background fill for form control elements in their hover state. */
  --cds-semantic-color-interactive-control-background-pressed: #857867; /** Background fill for form control elements in their pressed state. */
  --cds-semantic-color-interactive-control-background-selection-off: #857867; /** Background fill for form control elements (checkbox, radio, toggle) in their unselected (off) state. */
  --cds-semantic-color-interactive-control-background-selection-on: #008a14; /** Background fill for form control elements (checkbox, radio, toggle) in their selected (on) state. */
  --cds-semantic-color-interactive-control-icon-inverse-inverse: #26221d; /** Icon color for the indicator inside the switch component thumb on inverse surfaces, maintaining contrast against the thumb's inverted background. */
  --cds-semantic-color-interactive-control-stroke: #5c5347; /** Border color for form control elements (checkbox, radio, toggle) in their default state. */
  --cds-semantic-color-interactive-control-stroke-hover: #857867; /** Border color for form control elements (checkbox, radio, toggle) in their hover state. */
  --cds-semantic-color-interactive-control-stroke-pressed: #857867; /** Border color for form control elements (checkbox, radio, toggle) in their pressed state. */
  --cds-semantic-color-interactive-critical-background: #eeaaaa; /** Background fill for critical severity buttons in their default state. */
  --cds-semantic-color-interactive-critical-background-hover: #eeaaaa; /** Background fill for critical severity buttons in their hover state. */
  --cds-semantic-color-interactive-critical-background-pressed: #cc0000; /** Background fill for critical severity buttons in their pressed state. */
  --cds-semantic-color-interactive-critical-icon: #8b0000; /** Icon color for critical severity button icons. */
  --cds-semantic-color-interactive-critical-stroke-pressed: #6a0000; /** Border color for critical severity buttons in their pressed state. */
  --cds-semantic-color-interactive-critical-text: #8b0000; /** Text color for critical severity button labels. */
  --cds-semantic-color-interactive-destructive-background: #8b0000; /** Background fill for destructive action buttons in their default state. */
  --cds-semantic-color-interactive-destructive-background-hover: #8b0000; /** Background fill for destructive action buttons in their hover state. */
  --cds-semantic-color-interactive-destructive-background-pressed: #eeaaaa; /** Background fill for destructive action buttons in their pressed state. */
  --cds-semantic-color-interactive-destructive-stroke-pressed: #490000; /** Border color for destructive action buttons in their pressed state. */
  --cds-semantic-color-interactive-icon-read-only: #e2d8ca; /** Icon color for interactive control elements in their read-only state. */
  --cds-semantic-color-interactive-inverse-background: #ffffff; /** Background fill for inverse buttons in their default state. */
  --cds-semantic-color-interactive-inverse-background-hover: #ffffff; /** Background fill for inverse buttons in their hover state. */
  --cds-semantic-color-interactive-inverse-background-pressed: #ffffff; /** Background fill for inverse buttons in their pressed state. */
  --cds-semantic-color-interactive-inverse-icon: #26221d; /** Icon color for inverse button icons. */
  --cds-semantic-color-interactive-inverse-stroke: #efe9e1; /** Border color for inverse buttons in their default state. */
  --cds-semantic-color-interactive-inverse-stroke-hover: #efe9e1; /** Border color for inverse buttons in their hover state. */
  --cds-semantic-color-interactive-inverse-stroke-pressed: #efe9e1; /** Border color for inverse buttons in their pressed state. */
  --cds-semantic-color-interactive-inverse-text: #26221d; /** Text color for inverse button labels. */
  --cds-semantic-color-interactive-link-text-inverse: #26221d; /** Text color for link interactive elements displayed on dark or inverted backgrounds. */
  --cds-semantic-color-interactive-link-text-inverse-visited: #26221d; /** Text color for visited link interactive elements displayed on dark or inverted backgrounds. */
  --cds-semantic-color-interactive-outlined-subtle-icon: #857867; /** Icon color for outlined-subtle button icons. */
  --cds-semantic-color-interactive-outlined-subtle-stroke: #857867; /** Border color for outlined-subtle buttons in their default state. */
  --cds-semantic-color-interactive-outlined-subtle-stroke-hover: #857867; /** Border color for outlined-subtle buttons in their hover state. */
  --cds-semantic-color-interactive-outlined-subtle-stroke-pressed: #857867; /** Border color for outlined-subtle buttons in their pressed state. */
  --cds-semantic-color-interactive-outlined-subtle-text: #857867; /** Text color for outlined-subtle button labels. */
  --cds-semantic-color-interactive-outlined-icon: #d7c9b8; /** Icon color for outlined button icons. */
  --cds-semantic-color-interactive-outlined-stroke: #d7c9b8; /** Border color for outlined buttons in their default state. */
  --cds-semantic-color-interactive-outlined-stroke-hover: #d7c9b8; /** Border color for outlined buttons in their hover state. */
  --cds-semantic-color-interactive-outlined-stroke-pressed: #d7c9b8; /** Border color for outlined buttons in their pressed state. */
  --cds-semantic-color-interactive-outlined-text: #d7c9b8; /** Text color for outlined button labels. */
  --cds-semantic-color-interactive-primary-background: #008a14; /** Background fill for primary action buttons in their default state. */
  --cds-semantic-color-interactive-primary-background-hover: #008a14; /** Background fill for primary action buttons in their hover state. */
  --cds-semantic-color-interactive-primary-background-pressed: #008a14; /** Background fill for primary action buttons in their pressed state. */
  --cds-semantic-color-interactive-primary-stroke-pressed: #004d0b; /** Border color for primary action buttons in their pressed state. */
  --cds-semantic-color-interactive-secondary-background: #7ac285; /** Background fill for secondary action buttons in their default state. */
  --cds-semantic-color-interactive-secondary-background-hover: #7ac285; /** Background fill for secondary action buttons in their hover state. */
  --cds-semantic-color-interactive-secondary-background-pressed: #7ac285; /** Background fill for secondary action buttons in their pressed state. */
  --cds-semantic-color-interactive-secondary-icon: #003307; /** Icon color for secondary action button icons. */
  --cds-semantic-color-interactive-secondary-text: #003307; /** Text color for secondary action button labels. */
  --cds-semantic-color-interactive-stroke-read-only: #857867; /** Border color for interactive control elements in their read-only state. */
  --cds-semantic-color-interactive-subtle-background: #3a332c; /** Background fill for subtle (low-emphasis) interactive buttons in their default state. */
  --cds-semantic-color-interactive-subtle-background-hover: #3a332c; /** Background fill for subtle (low-emphasis) interactive buttons in their hover state. */
  --cds-semantic-color-interactive-subtle-background-pressed: #3a332c; /** Background fill for subtle (low-emphasis) interactive buttons in their pressed state. */
  --cds-semantic-color-interactive-subtle-stroke: #5c5347; /** Border color for subtle (low-emphasis) interactive buttons in their default state. */
  --cds-semantic-color-interactive-subtle-stroke-hover: #5c5347; /** Border color for subtle (low-emphasis) interactive buttons in their hover state. */
  --cds-semantic-color-interactive-subtle-stroke-pressed: #5c5347; /** Border color for subtle (low-emphasis) interactive buttons in their pressed state. */
  --cds-semantic-color-interactive-text-read-only: #e2d8ca; /** Text color for interactive control elements in their read-only state. */
  --cds-semantic-color-stroke-brand-accent: #8ef54f; /** Brand border color applied on top of accent brand-colored surfaces. */
  --cds-semantic-color-stroke-brand-on-accent: #8ef54f; /** Brand border color applied on top of accent-colored surfaces where the accent sits on a contrasting background. */
  --cds-semantic-color-stroke-brand-on-primary: #008a14; /** Brand border color applied on top of primary brand-colored surfaces. */
  --cds-semantic-color-stroke-brand-on-secondary: #857867; /** Brand border color applied on top of secondary brand-colored surfaces. */
  --cds-semantic-color-stroke-brand-on-tertiary: #007411; /** Brand border color applied on top of tertiary brand-colored surfaces. */
  --cds-semantic-color-stroke-divider: #857867; /** Horizontal rule border color for separating content sections within a page or component. */
  --cds-semantic-color-stroke-feedback-critical: #db5757; /** Stroke color for critical warning states — signals a severe or blocking situation requiring immediate attention. Not for form validation errors; use color/stroke/feedback/error for those. */
  --cds-semantic-color-stroke-feedback-error: #cc0000; /** Stroke color for form validation errors — applied to input field borders when user-submitted data fails validation. */
  --cds-semantic-color-stroke-feedback-neutral: #efe9e1; /** Border color for neutral feedback states such as informational input fields and alert outlines. */
  --cds-semantic-color-stroke-feedback-success: #7ac285; /** Border color for success feedback states such as valid input fields and confirmation outlines. */
  --cds-semantic-color-stroke-feedback-warning: #d5b800; /** Border color for warning feedback states such as caution input fields and alert outlines. */
  --cds-semantic-color-stroke-highlight: #52af60; /** Stroke color for selected or highlighted elements, such as selected item indicators and accent borders. Broadly applicable for any visual marking or selection state. */
  --cds-semantic-color-stroke-pricing-discount: #fff349; /** Border color for discount pricing labels and badges. */
  --cds-semantic-color-stroke-pricing-member: #52af60; /** Border color for member-exclusive pricing labels and badges. */
  --cds-semantic-color-stroke-strong: #a5947f; /** High-emphasis border color for prominent outlines on interactive elements such as focused inputs and selected states. */
  --cds-semantic-color-stroke-subtle: #5c5347; /** Low-emphasis border color for subtle dividers and understated outlines on interactive and static elements. */
  --cds-semantic-color-text-brand-accent: #8ef54f; /** Text color in the accent brand hue, applied directly to text elements. For text placed on top of accent-colored backgrounds, use color/text/brand/on-accent instead. */
  --cds-semantic-color-text-brand-on-accent: #004d0b; /** Text color for content placed on top of accent brand backgrounds. Ensures WCAG contrast compliance when paired with color/background/brand/accent. */
  --cds-semantic-color-text-brand-on-primary: #ffffff; /** Fill color for text on primary brand-colored surfaces (e.g. primary buttons, primary badges). */
  --cds-semantic-color-text-brand-on-secondary: #ffffff; /** Fill color for text on secondary brand-colored surfaces (e.g. secondary buttons, secondary badges). */
  --cds-semantic-color-text-brand-on-tertiary: #3a332c; /** Fill color for text on tertiary brand-colored surfaces. */
  --cds-semantic-color-text-feedback-error: #eb8e8e; /** Fill color for error state text. Used for inline validation messages and error labels. */
  --cds-semantic-color-text-feedback-on-critical: #490000; /** Fill color for text on critical feedback surfaces (e.g. error banners, critical alert backgrounds). */
  --cds-semantic-color-text-feedback-on-destructive: #eb8e8e; /** Fill color for text on destructive feedback surfaces (e.g. destructive action confirmation banners). */
  --cds-semantic-color-text-feedback-on-neutral: #26221d; /** Fill color for text on neutral feedback surfaces (e.g. informational banners and toasts). */
  --cds-semantic-color-text-feedback-on-success: #003307; /** Fill color for text on success feedback surfaces (e.g. success banners and toasts). */
  --cds-semantic-color-text-feedback-on-warning: #504000; /** Fill color for text on warning feedback surfaces (e.g. warning banners and toasts). */
  --cds-semantic-color-text-highlight: #52af60; /** Fill color for highlighted text, such as search result matches or emphasised inline content. */
  --cds-semantic-color-text-inverse: #26221d; /** Fill color for text placed on dark or inverted backgrounds. */
  --cds-semantic-color-text-member-on-subtle: #008a14; /** Text colour for content placed on color/background/member/subtle. */
  --cds-semantic-color-text-pricing-on-discount: #d33636; /** Fill color for text on discount pricing badge surfaces. */
  --cds-semantic-color-text-primary: #ffffff; /** Fill color for primary body text and headings. Default text color for most content. */
  --cds-semantic-color-text-secondary: #e2d8ca; /** Fill color for secondary (subdued) text. Used for supporting content, captions, and metadata. */
  --cds-semantic-typography-accent-font-family: Coop Marker; /** ID26 brand theme token. Font family used for accent/script text in the ID26 brand. */
  --cds-semantic-typography-accent-font-weight-regular: 400; /** ID26 brand theme token. Regular font weight for accent/script text in the ID26 type scale. */
  --cds-semantic-typography-accent-rotation: 8deg; /** Rotation angle for the accent typography style, defining the characteristic tilt applied to accent and script text in the ID26 brand. */
  --cds-semantic-typography-body-link-font-family: Coop Sans Variable; /** ID26 brand theme token. Font family used for body link text in the ID26 brand. */
  --cds-semantic-typography-body-link-font-weight-bold: 600; /** ID26 brand theme token. Bold font weight for body link text in the ID26 type scale. */
  --cds-semantic-typography-body-font-family: Coop Sans Variable; /** ID26 brand theme token. Font family used for body-scale type in the ID26 brand. */
  --cds-semantic-typography-body-font-weight-bold: 600; /** ID26 brand theme token. Bold font weight for body text in the ID26 type scale. */
  --cds-semantic-typography-display-font-family: Coop Sans Variable; /** ID26 brand theme token. Font family used for display-scale type in the ID26 brand. */
  --cds-semantic-typography-display-font-weight-black: 900; /** ID26 brand theme token. Black (heaviest) font weight for display text in the ID26 type scale. */
  --cds-semantic-typography-display-font-weight-bold: 700; /** ID26 brand theme token. Bold font weight for display text in the ID26 type scale. */
  --cds-semantic-typography-header-font-family: Coop Sans Variable; /** ID26 brand theme token. Font family used for header-scale type in the ID26 brand. */
  --cds-semantic-typography-header-font-weight-bold: 700; /** ID26 brand theme token. Bold font weight for header text in the ID26 type scale. */
  --cds-semantic-typography-intro-font-family: Coop Sans Variable; /** ID26 brand theme token. Font family used for intro-scale type in the ID26 brand. */
  --cds-semantic-typography-pricing-font-family: Coop Sans Variable; /** ID26 brand theme token. Font family used for pricing text in the ID26 brand. */
  --cds-semantic-typography-pricing-font-weight-bold: 900; /** ID26 brand theme token. Bold font weight for pricing text in the ID26 type scale. */
  --cds-border-radius-2xsm: 4px; /** 2x-small corner radius step. Applied to subtle rounding on small elements such as thumbnails and badges. */
  --cds-border-radius-full: 9999999px; /** Fully rounded corner radius. Applied to pill-shaped elements such as badges and toggles. */
  --cds-border-radius-lg: 24px; /** Large corner radius step. Applied to prominent cards and overlay containers. */
  --cds-border-radius-md: 16px; /** Medium corner radius step. Applied to standard cards, modals, and panel containers. */
  --cds-border-radius-none: 0px; /** No corner radius. Applied to elements that require sharp, square corners. */
  --cds-border-radius-sm: 12px; /** Small corner radius step. Applied to modestly rounded UI elements such as chips and tags. */
  --cds-border-radius-xlg: 40px; /** Extra-large corner radius step. Applied to highly rounded containers and feature card surfaces. */
  --cds-border-radius-xsm: 8px; /** Extra-small corner radius step. Applied to lightly rounded elements such as input fields and small containers. */
  --cds-border-width-default: 1px; /** Default border width for standard outlined elements such as inputs, cards, and containers. */
  --cds-border-width-divider: 1px; /** Border width for divider lines that separate sections or list items. */
  --cds-border-width-focus: 2px; /** Border width for focus ring outlines on interactive elements. */
  --cds-border-width-strong: 2px; /** Strong border width for emphasized outlines, selection states, and high-contrast borders. */
  --cds-sizing-2xlg: 64px; /** 2x-large step in the sizing scale. Used for large display elements and hero components. */
  --cds-sizing-2xsm: 16px; /** 2x-small step in the sizing scale. Used for very compact UI elements such as small icons and indicators. */
  --cds-sizing-3xlg: 72px; /** 3x-large step in the sizing scale. Used for large structural elements and illustrative surfaces. */
  --cds-sizing-3xsm: 8px; /** 3x-small step in the sizing scale. Used for the smallest icon and decorative element sizes. */
  --cds-sizing-4xlg: 80px; /** 4x-large step in the sizing scale. The largest fixed sizing step, used for hero images and full-bleed display elements. */
  --cds-sizing-lg: 48px; /** Large step in the sizing scale. Used for prominent interactive element heights (e.g. large buttons, inputs). */
  --cds-sizing-md: 40px; /** Medium step in the sizing scale. Used for standard interactive element heights (e.g. medium buttons, inputs). */
  --cds-sizing-sm: 32px; /** Small step in the sizing scale. Used for compact interactive element heights (e.g. small buttons, icon buttons). */
  --cds-sizing-xlg: 56px; /** Extra-large step in the sizing scale. Used for oversized interactive or display elements. */
  --cds-sizing-xsm: 24px; /** Extra-small step in the sizing scale. Used for minimal interactive or decorative element heights. */
  --cds-spacing-2xlg: 48px; /** Spacing between objects, diffrent sections related to each other */
  --cds-spacing-2xsm: 4px; /** Small gap, and padding in elements e.g. button top and bottom */
  --cds-spacing-3xlg: 56px; /** Spacing between objects or padding */
  --cds-spacing-3xsm: 2px; /** Gap between two text objects closely related e.g. elements in tag, metadata and badges in productcard */
  --cds-spacing-4xlg: 64px; /** Spacing between objects or padding */
  --cds-spacing-lg: 24px; /** Viewport padding for tablet and desktop */
  --cds-spacing-md: 16px; /** Standard padding and gap, viewport padding for mobile devices */
  --cds-spacing-none: 0px; /** Resetting padding/margins or elements that are edge-to-edge. */
  --cds-spacing-px: 1px; /** a 1px unit */
  --cds-spacing-sm: 12px; /** Spacing between objects or padding */
  --cds-spacing-xlg: 40px; /** Viewport padding for tablet and desktop */
  --cds-spacing-xsm: 8px; /** Gap between closely related elements, text - icon spacing  */
  --cds-utility-touch-target-min: 24px; /** Minimum touch target size for interactive control elements, ensuring accessibility compliance. */
}