npm - @sb1/ffe-core - Versions diffs - 32.0.4 → 33.0.0 - Mend

@sb1/ffe-core 32.0.4 → 33.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/css/colors-semantic.css +577 -890
package/css/ffe.css +581 -882
package/less/colors-semantic-chevron.less +7 -0
package/less/colors-semantic-storybook.less +288 -313
package/less/colors-semantic.less +577 -890
package/less/typography.less +5 -1
package/less/variables.less +3 -0
package/lib/semanticColors.js +47 -37
package/lib/semanticColorsTailwind.js +46 -37
package/package.json +11 -6

package/css/colors-semantic.css CHANGED Viewed

@@ -1,902 +1,589 @@
-// Generated from Figma tokens
-// Context accent
-.ffe-accent-mode {
---ffe-color-background-default: var(--ffe-color-speciality-background-accent);
---ffe-color-background-subtle: var(--ffe-color-speciality-background-accent-subtle);
---ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-accent-accent);
---ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-accent-accent-hover);
---ffe-color-surface-primary-default-pressed: var(--ffe-color-speciality-background-surface-accent-accent-pressed);
---ffe-color-surface-secondary-default: var(--ffe-color-speciality-background-surface-accent-accent);
---ffe-color-surface-secondary-hover: var(--ffe-color-speciality-background-surface-accent-accent-hover);
---ffe-color-surface-secondary-pressed: var(--ffe-color-speciality-background-surface-accent-accent-pressed);
---ffe-color-surface-tertiary-default: var(--ffe-color-speciality-background-surface-accent-accent);
---ffe-color-surface-tertiary-hover: var(--ffe-color-speciality-background-surface-accent-accent-hover);
---ffe-color-surface-tertiary-pressed: var(--ffe-color-speciality-background-surface-accent-accent-pressed);
---ffe-color-surface-feedback-info: var(--ffe-color-accent-feedback-info-subtlest);
---ffe-color-surface-feedback-success: var(--ffe-color-accent-feedback-success-subtlest);
---ffe-color-surface-feedback-warning: var(--ffe-color-accent-feedback-warning-subtlest);
---ffe-color-surface-feedback-critical: var(--ffe-color-accent-feedback-critical-subtlest);
---ffe-color-surface-feedback-tip: var(--ffe-color-accent-feedback-tip-sublest);
---ffe-color-fill-primary-default: var(--ffe-color-accent-brand-primary-strong);
---ffe-color-fill-primary-hover: var(--ffe-color-accent-brand-primary-stronger);
---ffe-color-fill-primary-pressed: var(--ffe-color-accent-brand-primary-strongest);
---ffe-color-fill-primary-selected-default: var(--ffe-color-accent-interactive-selected-default);
---ffe-color-fill-primary-selected-hover: var(--ffe-color-accent-interactive-selected-hover);
---ffe-color-fill-primary-selected-pressed: var(--ffe-color-accent-interactive-selected-pressed);
---ffe-color-fill-primary-subtle: var(--ffe-color-accent-brand-primary-subtler);
---ffe-color-fill-primary-subtle-hover: var(--ffe-color-accent-brand-primary-subtle);
---ffe-color-fill-primary-subtle-pressed: var(--ffe-color-accent-brand-primary-default);
---ffe-color-fill-primary-invisible: var(--ffe-color-speciality-background-transparent);
---ffe-color-fill-secondary-default: var(--ffe-color-accent-brand-secondary-medium);
---ffe-color-fill-secondary-default-hover: var(--ffe-color-accent-brand-secondary-strong);
---ffe-color-fill-secondary-default-pressed: var(--ffe-color-accent-brand-secondary-stronger);
---ffe-color-fill-secondary-subtle: var(--ffe-color-accent-brand-secondary-subtler);
---ffe-color-fill-secondary-subtle-hover: var(--ffe-color-accent-brand-secondary-subtle);
---ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-accent-brand-secondary-default);
---ffe-color-fill-tertiary-default: var(--ffe-color-accent-brand-tertiary-medium);
---ffe-color-fill-tertiary-default-hover: var(--ffe-color-accent-brand-tertiary-strong);
---ffe-color-fill-tertiary-default-pressed: var(--ffe-color-accent-brand-tertiary-stronger);
---ffe-color-fill-tertiary-subtle: var(--ffe-color-accent-brand-tertiary-subtle);
---ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-accent-brand-tertiary-default);
---ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-accent-brand-tertiary-medium);
---ffe-color-fill-neutral-default: var(--ffe-color-accent-neutral-alpha-strong);
---ffe-color-fill-neutral-default-hover: var(--ffe-color-accent-neutral-alpha-stronger);
---ffe-color-fill-neutral-default-pressed: var(--ffe-color-accent-neutral-alpha-strongest);
---ffe-color-fill-neutral-subtle: var(--ffe-color-accent-neutral-alpha-default);
---ffe-color-fill-neutral-subtle-hover: var(--ffe-color-accent-neutral-alpha-medium);
---ffe-color-fill-neutral-subtle-pressed: var(--ffe-color-accent-neutral-alpha-strong);
---ffe-color-fill-neutral-extra-subtle: var(--ffe-color-accent-neutral-alpha-subtlest);
---ffe-color-fill-neutral-extra-subtle-hover: var(--ffe-color-accent-neutral-alpha-subtler);
---ffe-color-fill-neutral-extra-subtle-pressed: var(--ffe-color-accent-neutral-alpha-subtle);
---ffe-color-fill-feedback-info: var(--ffe-color-accent-feedback-info-strong);
---ffe-color-fill-feedback-info-subtle: var(--ffe-color-accent-feedback-info-subtler);
---ffe-color-fill-feedback-success: var(--ffe-color-accent-feedback-success-strong);
---ffe-color-fill-feedback-success-subtle: var(--ffe-color-accent-feedback-success-subtler);
---ffe-color-fill-feedback-warning: var(--ffe-color-accent-feedback-warning-strong);
---ffe-color-fill-feedback-warning-subtle: var(--ffe-color-accent-feedback-warning-subtler);
---ffe-color-fill-feedback-critical: var(--ffe-color-accent-feedback-critical-strong);
---ffe-color-fill-feedback-critical-subtle: var(--ffe-color-accent-feedback-critical-subtler);
---ffe-color-fill-feedback-tip: var(--ffe-color-accent-feedback-tip-stronger);
---ffe-color-fill-feedback-tip-subtle: var(--ffe-color-accent-feedback-tip-subtler);
---ffe-color-foreground-default: var(--ffe-color-accent-neutral-strongest);
---ffe-color-foreground-subtle: var(--ffe-color-accent-neutral-stronger);
---ffe-color-foreground-emphasis: var(--ffe-color-accent-brand-emphasis-stronger);
---ffe-color-foreground-inverse: var(--ffe-color-accent-neutral-inverted);
---ffe-color-foreground-on-fill-default: var(--ffe-color-accent-neutral-inverted);
---ffe-color-foreground-on-fill-inverse: var(--ffe-color-accent-neutral-strongest);
---ffe-color-foreground-interactive-link: var(--ffe-color-accent-interactive-default);
---ffe-color-foreground-interactive-link-hover: var(--ffe-color-accent-interactive-hover);
---ffe-color-foreground-interactive-link-pressed: var(--ffe-color-accent-interactive-pressed);
---ffe-color-foreground-interactive-link-active: var(--ffe-color-accent-interactive-selected-default);
---ffe-color-foreground-feedback-info: var(--ffe-color-accent-feedback-info-strongest);
---ffe-color-foreground-feedback-success: var(--ffe-color-accent-feedback-success-strongest);
---ffe-color-foreground-feedback-warning: var(--ffe-color-accent-feedback-warning-strongest);
---ffe-color-foreground-feedback-critical: var(--ffe-color-accent-feedback-critical-strongest);
---ffe-color-foreground-feedback-tip: var(--ffe-color-accent-feedback-tip-strongest);
---ffe-color-border-primary-default: var(--ffe-color-speciality-static-alpha-white-stronger);
---ffe-color-border-primary-default-hover: var(--ffe-color-speciality-static-alpha-white-strong);
---ffe-color-border-primary-default-pressed: var(--ffe-color-speciality-static-alpha-white-medium);
---ffe-color-border-primary-subtle: var(--ffe-color-speciality-static-alpha-white-default);
---ffe-color-border-primary-subtle-hover: var(--ffe-color-speciality-static-alpha-white-medium);
---ffe-color-border-primary-subtle-pressed: var(--ffe-color-speciality-static-alpha-white-strong);
---ffe-color-border-primary-emphasis: var(--ffe-color-accent-brand-primary-strongest);
---ffe-color-border-secondary-default: var(--ffe-color-accent-brand-secondary-medium);
---ffe-color-border-secondary-hover: var(--ffe-color-accent-brand-secondary-strong);
---ffe-color-border-secondary-pressed: var(--ffe-color-accent-brand-secondary-stronger);
---ffe-color-border-tertiary-default: var(--ffe-color-accent-brand-tertiary-medium);
---ffe-color-border-tertiary-hover: var(--ffe-color-accent-brand-tertiary-strong);
---ffe-color-border-tertiary-pressed: var(--ffe-color-accent-brand-tertiary-stronger);
---ffe-color-border-interactive-focus: var(--ffe-color-accent-interactive-focus);
---ffe-color-border-interactive-selected: var(--ffe-color-accent-brand-primary-stronger);
---ffe-color-border-feedback-info: var(--ffe-color-accent-feedback-info-strong);
---ffe-color-border-feedback-success: var(--ffe-color-accent-feedback-success-strong);
---ffe-color-border-feedback-warning: var(--ffe-color-accent-feedback-warning-strong);
---ffe-color-border-feedback-critical: var(--ffe-color-accent-feedback-critical-strong);
---ffe-color-border-feedback-tip: var(--ffe-color-accent-feedback-tip-strong);
---ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-medium);
---ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-strong);
---ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-stronger);
---ffe-color-component-button-action-fill-default: var(--ffe-color-accent-feedback-success-subtle);
---ffe-color-component-button-action-fill-hover: var(--ffe-color-accent-feedback-success-subtler);
---ffe-color-component-button-action-fill-pressed: var(--ffe-color-accent-feedback-success-subtle);
---ffe-color-component-button-action-foreground-default: var(--ffe-color-speciality-static-neutral-white);
---ffe-color-component-button-action-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
---ffe-color-component-button-primary-border-default: var(--ffe-color-accent-brand-emphasis-strong);
---ffe-color-component-button-primary-border-hover: var(--ffe-color-accent-brand-emphasis-stronger);
---ffe-color-component-button-primary-border-pressed: var(--ffe-color-accent-brand-emphasis-strongest);
---ffe-color-component-button-primary-fill-default: var(--ffe-color-speciality-buttons-primary-accent-fill-default);
---ffe-color-component-button-primary-fill-hover: var(--ffe-color-speciality-buttons-primary-accent-fill-hover);
---ffe-color-component-button-primary-fill-pressed: var(--ffe-color-speciality-buttons-primary-accent-fill-pressed);
---ffe-color-component-button-primary-foreground-default: var(--ffe-color-speciality-buttons-primary-accent-foreground-default);
---ffe-color-component-button-primary-foreground-hover: var(--ffe-color-speciality-buttons-primary-accent-foreground-default);
---ffe-color-component-button-secondary-border-default: var(--ffe-color-speciality-buttons-secondary-accent-border-default);
---ffe-color-component-button-secondary-border-hover: var(--ffe-color-speciality-buttons-secondary-accent-border-default);
---ffe-color-component-button-secondary-border-pressed: var(--ffe-color-speciality-buttons-secondary-accent-border-default);
---ffe-color-component-button-secondary-fill-default: var(--ffe-color-speciality-buttons-secondary-accent-fill-default);
---ffe-color-component-button-secondary-fill-hover: var(--ffe-color-speciality-buttons-secondary-accent-fill-hover);
---ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-speciality-buttons-secondary-accent-fill-pressed);
---ffe-color-component-button-secondary-foreground-default: var(--ffe-color-speciality-buttons-secondary-accent-foreground-default);
---ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-speciality-buttons-secondary-accent-foreground-default);
---ffe-color-component-button-tertiary-fill-default: var(--ffe-color-speciality-buttons-tertiary-accent-fill-default);
---ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-speciality-buttons-tertiary-accent-fill-hover);
---ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-speciality-buttons-tertiary-accent-fill-pressed);
---ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-speciality-buttons-tertiary-accent-foreground-default);
---ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-speciality-buttons-tertiary-accent-foreground-default);
---ffe-color-component-toggleswitch-handle-default: var(--ffe-color-speciality-static-neutral-white);
---ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-medium);
---ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-strong);
---ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-medium);
---ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-accent-feedback-success-default);
---ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-accent-feedback-success-subtle);
---ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-feedback-success-default);
---ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-accent-feedback-critical-default);
---ffe-color-component-logo-name: var(--ffe-color-alpha-white-1000);
---ffe-color-component-logo-number1: var(--ffe-color-alpha-white-1000);
---ffe-color-component-logo-circle-dark-red: #af0000;
---ffe-color-component-logo-circle-light-red: #e60000;}
+/* Generated from Figma tokens */
-// Context
+/* Default context */
 :root,
 :host,
 .ffe-default-mode {
---ffe-color-background-default: var(--ffe-color-speciality-background-default);
---ffe-color-background-subtle: var(--ffe-color-speciality-background-subtle);
---ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-primary-default);
---ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-primary-default-hover);
---ffe-color-surface-primary-default-pressed: var(--ffe-color-speciality-background-surface-primary-default-pressed);
---ffe-color-surface-secondary-default: var(--ffe-color-speciality-background-surface-secondary-default);
---ffe-color-surface-secondary-hover: var(--ffe-color-speciality-background-surface-secondary-default-hover);
---ffe-color-surface-secondary-pressed: var(--ffe-color-speciality-background-surface-secondary-default-pressed);
---ffe-color-surface-tertiary-default: var(--ffe-color-speciality-background-surface-tertiary-default);
---ffe-color-surface-tertiary-hover: var(--ffe-color-speciality-background-surface-tertiary-default-hover);
---ffe-color-surface-tertiary-pressed: var(--ffe-color-speciality-background-surface-tertiary-default-pressed);
---ffe-color-surface-feedback-info: var(--ffe-color-default-feedback-info-subtlest);
---ffe-color-surface-feedback-success: var(--ffe-color-default-feedback-success-subtlest);
---ffe-color-surface-feedback-warning: var(--ffe-color-default-feedback-warning-subtlest);
---ffe-color-surface-feedback-critical: var(--ffe-color-default-feedback-critical-subtlest);
---ffe-color-surface-feedback-tip: var(--ffe-color-default-feedback-tip-sublest);
---ffe-color-fill-primary-default: var(--ffe-color-default-brand-primary-strong);
---ffe-color-fill-primary-hover: var(--ffe-color-default-brand-primary-stronger);
---ffe-color-fill-primary-pressed: var(--ffe-color-default-brand-primary-strongest);
---ffe-color-fill-primary-selected-default: var(--ffe-color-default-interactive-selected-default);
---ffe-color-fill-primary-selected-hover: var(--ffe-color-default-interactive-selected-hover);
---ffe-color-fill-primary-selected-pressed: var(--ffe-color-default-interactive-selected-pressed);
---ffe-color-fill-primary-subtle: var(--ffe-color-default-brand-primary-subtlest);
---ffe-color-fill-primary-subtle-hover: var(--ffe-color-default-brand-primary-subtler);
---ffe-color-fill-primary-subtle-pressed: var(--ffe-color-default-brand-primary-subtle);
---ffe-color-fill-primary-invisible: var(--ffe-color-speciality-background-transparent);
---ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-medium);
---ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-strong);
---ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-stronger);
---ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtler);
---ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtle);
---ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-default);
---ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-medium);
---ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-strong);
---ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-stronger);
---ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
---ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
---ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
---ffe-color-fill-neutral-default: var(--ffe-color-default-neutral-alpha-strong);
---ffe-color-fill-neutral-default-hover: var(--ffe-color-default-neutral-alpha-stronger);
---ffe-color-fill-neutral-default-pressed: var(--ffe-color-default-neutral-alpha-strongest);
---ffe-color-fill-neutral-subtle: var(--ffe-color-default-neutral-alpha-default);
---ffe-color-fill-neutral-subtle-hover: var(--ffe-color-default-neutral-alpha-medium);
---ffe-color-fill-neutral-subtle-pressed: var(--ffe-color-default-neutral-alpha-strong);
---ffe-color-fill-neutral-extra-subtle: var(--ffe-color-default-neutral-alpha-subtlest);
---ffe-color-fill-neutral-extra-subtle-hover: var(--ffe-color-default-neutral-alpha-subtler);
---ffe-color-fill-neutral-extra-subtle-pressed: var(--ffe-color-default-neutral-alpha-subtle);
---ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
---ffe-color-fill-feedback-info-subtle: var(--ffe-color-default-feedback-info-subtler);
---ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
---ffe-color-fill-feedback-success-subtle: var(--ffe-color-default-feedback-success-subtler);
---ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
---ffe-color-fill-feedback-warning-subtle: var(--ffe-color-default-feedback-warning-subtler);
---ffe-color-fill-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
---ffe-color-fill-feedback-critical-subtle: var(--ffe-color-default-feedback-critical-subtler);
---ffe-color-fill-feedback-tip: var(--ffe-color-default-feedback-tip-stronger);
---ffe-color-fill-feedback-tip-subtle: var(--ffe-color-default-feedback-tip-subtler);
---ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
---ffe-color-foreground-subtle: var(--ffe-color-default-neutral-stronger);
---ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-stronger);
---ffe-color-foreground-inverse: var(--ffe-color-default-neutral-subtlest);
---ffe-color-foreground-on-fill-default: var(--ffe-color-default-neutral-inverted);
---ffe-color-foreground-on-fill-inverse: var(--ffe-color-default-neutral-strongest);
---ffe-color-foreground-interactive-link: var(--ffe-color-default-interactive-default);
---ffe-color-foreground-interactive-link-hover: var(--ffe-color-default-interactive-hover);
---ffe-color-foreground-interactive-link-pressed: var(--ffe-color-default-interactive-pressed);
---ffe-color-foreground-interactive-link-active: var(--ffe-color-default-interactive-selected-default);
---ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
---ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
---ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
---ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
---ffe-color-foreground-feedback-tip: var(--ffe-color-default-feedback-tip-strongest);
---ffe-color-border-primary-default: var(--ffe-color-default-neutral-default);
---ffe-color-border-primary-default-hover: var(--ffe-color-default-neutral-medium);
---ffe-color-border-primary-default-pressed: var(--ffe-color-default-neutral-strong);
---ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtler);
---ffe-color-border-primary-subtle-hover: var(--ffe-color-default-neutral-subtle);
---ffe-color-border-primary-subtle-pressed: var(--ffe-color-default-neutral-default);
---ffe-color-border-primary-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
---ffe-color-border-secondary-default: var(--ffe-color-default-brand-secondary-medium);
---ffe-color-border-secondary-hover: var(--ffe-color-default-brand-secondary-strong);
---ffe-color-border-secondary-pressed: var(--ffe-color-default-brand-secondary-stronger);
---ffe-color-border-tertiary-default: var(--ffe-color-default-brand-tertiary-medium);
---ffe-color-border-tertiary-hover: var(--ffe-color-default-brand-tertiary-strong);
---ffe-color-border-tertiary-pressed: var(--ffe-color-default-brand-tertiary-stronger);
---ffe-color-border-interactive-focus: var(--ffe-color-default-interactive-focus);
---ffe-color-border-interactive-selected: var(--ffe-color-default-brand-primary-stronger);
---ffe-color-border-feedback-info: var(--ffe-color-default-feedback-info-strong);
---ffe-color-border-feedback-success: var(--ffe-color-default-feedback-success-strong);
---ffe-color-border-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
---ffe-color-border-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
---ffe-color-border-feedback-tip: var(--ffe-color-default-feedback-tip-strong);
---ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-medium);
---ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-strong);
---ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-stronger);
---ffe-color-component-button-action-fill-default: var(--ffe-color-accent-feedback-success-subtle);
---ffe-color-component-button-action-fill-hover: var(--ffe-color-accent-feedback-success-subtler);
---ffe-color-component-button-action-fill-pressed: var(--ffe-color-accent-feedback-success-subtle);
---ffe-color-component-button-action-foreground-default: var(--ffe-color-speciality-static-neutral-white);
---ffe-color-component-button-action-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
---ffe-color-component-button-primary-border-default: var(--ffe-color-default-brand-emphasis-strong);
---ffe-color-component-button-primary-border-hover: var(--ffe-color-default-brand-emphasis-stronger);
---ffe-color-component-button-primary-border-pressed: var(--ffe-color-default-brand-emphasis-strongest);
---ffe-color-component-button-primary-fill-default: var(--ffe-color-speciality-buttons-primary-default-fill-default);
---ffe-color-component-button-primary-fill-hover: var(--ffe-color-speciality-buttons-primary-default-fill-hover);
---ffe-color-component-button-primary-fill-pressed: var(--ffe-color-speciality-buttons-primary-default-fill-pressed);
---ffe-color-component-button-primary-foreground-default: var(--ffe-color-speciality-static-neutral-white);
---ffe-color-component-button-primary-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
---ffe-color-component-button-secondary-border-default: var(--ffe-color-speciality-buttons-secondary-default-border-default);
---ffe-color-component-button-secondary-border-hover: var(--ffe-color-speciality-buttons-secondary-default-border-default);
---ffe-color-component-button-secondary-border-pressed: var(--ffe-color-speciality-buttons-secondary-default-border-default);
---ffe-color-component-button-secondary-fill-default: var(--ffe-color-speciality-buttons-secondary-default-fill-default);
---ffe-color-component-button-secondary-fill-hover: var(--ffe-color-speciality-buttons-secondary-default-fill-hover);
---ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-speciality-buttons-secondary-default-fill-pressed);
---ffe-color-component-button-secondary-foreground-default: var(--ffe-color-speciality-buttons-secondary-default-foreground-default);
---ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-speciality-buttons-secondary-default-foreground-default);
---ffe-color-component-button-tertiary-fill-default: var(--ffe-color-speciality-buttons-tertiary-default-fill-default);
---ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-speciality-buttons-tertiary-default-fill-hover);
---ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-speciality-buttons-tertiary-default-fill-pressed);
---ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-speciality-buttons-tertiary-default-foreground-default);
---ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-speciality-buttons-tertiary-default-foreground-default);
---ffe-color-component-toggleswitch-handle-default: var(--ffe-color-speciality-static-neutral-white);
---ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-medium);
---ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-strong);
---ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-medium);
---ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-accent-feedback-success-default);
---ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-accent-feedback-success-subtle);
---ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-feedback-success-default);
---ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-default-feedback-critical-medium);
---ffe-color-component-logo-name: var(--ffe-color-speciality-logo-name);
---ffe-color-component-logo-number1: var(--ffe-color-alpha-white-1000);
+  --ffe-color-background-default: #ffffff;
+--ffe-color-background-subtle: #fdf8f5;
+--ffe-color-surface-primary-default: #ffffff;
+--ffe-color-surface-primary-default-hover: #e7f1f9;
+--ffe-color-surface-primary-default-pressed: #d7e7f4;
+--ffe-color-surface-secondary-default: #e5f0f5;
+--ffe-color-surface-secondary-default-hover: #dceaef;
+--ffe-color-surface-secondary-default-pressed: #cbe2eb;
+--ffe-color-surface-tertiary-default: #eaeaf6;
+--ffe-color-surface-tertiary-default-hover: #e6e6f4;
+--ffe-color-surface-tertiary-default-pressed: #dcdcef;
+--ffe-color-surface-neutral-default: #f0f0f0;
+--ffe-color-surface-neutral-default-hover: #e5e5e5;
+--ffe-color-surface-neutral-default-pressed: #dbdbdb;
+--ffe-color-surface-feedback-info: #e5f0f5;
+--ffe-color-surface-feedback-success: #dff6eb;
+--ffe-color-surface-feedback-warning: #fdeed3;
+--ffe-color-surface-feedback-critical: #ffe3e0;
+--ffe-color-surface-feedback-tip: #eaeaf6;
+--ffe-color-fill-primary-default: #9ec2e5;
+--ffe-color-fill-primary-default-hover: #7dabd9;
+--ffe-color-fill-primary-default-pressed: #5494d4;
+--ffe-color-fill-primary-selected-default: #005aa4;
+--ffe-color-fill-primary-selected-hover: #073f83;
+--ffe-color-fill-primary-selected-pressed: #082868;
+--ffe-color-fill-primary-subtle: #e7f1f9;
+--ffe-color-fill-primary-subtle-hover: #d7e7f4;
+--ffe-color-fill-primary-subtle-pressed: #c3d9ef;
+--ffe-color-fill-primary-invisible: #ffffff00;
+--ffe-color-fill-secondary-default: #a6cee2;
+--ffe-color-fill-secondary-default-hover: #7eb5d2;
+--ffe-color-fill-secondary-default-pressed: #6096bd;
+--ffe-color-fill-secondary-subtle: #dceaef;
+--ffe-color-fill-secondary-subtle-hover: #c3dfea;
+--ffe-color-fill-secondary-subtle-pressed: #b6d7e7;
+--ffe-color-fill-tertiary-default: #c1c1dc;
+--ffe-color-fill-tertiary-default-hover: #b4aecb;
+--ffe-color-fill-tertiary-default-pressed: #a39db9;
+--ffe-color-fill-tertiary-subtle: #e6e6f4;
+--ffe-color-fill-tertiary-subtle-hover: #d3d3ea;
+--ffe-color-fill-tertiary-subtle-pressed: #cacae3;
+--ffe-color-fill-neutral-default: #020a0a33;
+--ffe-color-fill-neutral-default-hover: #020a0a40;
+--ffe-color-fill-neutral-default-pressed: #020a0a4d;
+--ffe-color-fill-neutral-subtle: #020a0a13;
+--ffe-color-fill-neutral-subtle-hover: #020a0a1a;
+--ffe-color-fill-neutral-subtle-pressed: #020a0a26;
+--ffe-color-fill-neutral-extra-subtle: #020a0a06;
+--ffe-color-fill-neutral-extra-subtle-hover: #020a0a0d;
+--ffe-color-fill-neutral-extra-subtle-pressed: #020a0a13;
+--ffe-color-fill-feedback-info: #457aa1;
+--ffe-color-fill-feedback-info-subtle: #cbe2eb;
+--ffe-color-fill-feedback-success: #2a7e5b;
+--ffe-color-fill-feedback-success-subtle: #bbedd5;
+--ffe-color-fill-feedback-warning: #a95704;
+--ffe-color-fill-feedback-warning-subtle: #ffd394;
+--ffe-color-fill-feedback-critical: #c62a2f;
+--ffe-color-fill-feedback-critical-subtle: #ffbeb8;
+--ffe-color-fill-feedback-tip: #5a5671;
+--ffe-color-fill-feedback-tip-subtle: #dcdcef;
+--ffe-color-foreground-default: #1f1f1f;
+--ffe-color-foreground-subtle: #525252;
+--ffe-color-foreground-emphasis: #08235e;
+--ffe-color-foreground-inverse: #ffffff;
+--ffe-color-foreground-interactive-link: #005aa4;
+--ffe-color-foreground-interactive-link-hover: #073f83;
+--ffe-color-foreground-interactive-link-pressed: #082868;
+--ffe-color-foreground-interactive-link-active: #005aa4;
+--ffe-color-foreground-feedback-info: #234f71;
+--ffe-color-foreground-feedback-success: #0a4d37;
+--ffe-color-foreground-feedback-warning: #682c00;
+--ffe-color-foreground-feedback-critical: #7c1214;
+--ffe-color-foreground-feedback-tip: #45415a;
+--ffe-color-component-form-input-foreground-default: #1f1f1f;
+--ffe-color-component-form-input-foreground-subtle: #525252;
+--ffe-color-component-form-input-foreground-placeholder: #8f8f8f;
+--ffe-color-component-form-input-foreground-disabled: #a4a4a4;
+--ffe-color-component-form-input-foreground-read-only: #525252;
+--ffe-color-component-form-input-foreground-error: #7c1214;
+--ffe-color-component-form-input-border-active: #08235e;
+--ffe-color-component-form-input-fill-default: #ffffff;
+--ffe-color-component-form-input-fill-default-hover: #e7f1f9;
+--ffe-color-component-form-input-fill-default-pressed: #d7e7f4;
+--ffe-color-component-form-input-fill-disabled: #d6d6d6;
+--ffe-color-component-form-input-fill-read-only: #e5e5e5;
+--ffe-color-component-form-input-fill-error: #ffe3e0;
+--ffe-color-component-form-toggleswitch-handle-default: #ffffff;
+--ffe-color-component-form-toggleswitch-fill-default: #c2c2c2;
+--ffe-color-component-form-toggleswitch-fill-default-hover: #a4a4a4;
+--ffe-color-component-form-toggleswitch-fill-default-pressed: #8f8f8f;
+--ffe-color-component-form-toggleswitch-fill-selected: #48a781;
+--ffe-color-component-form-toggleswitch-fill-selected-hover: #2a7e5b;
+--ffe-color-component-form-toggleswitch-fill-selected-pressed: #0d6346;
+--ffe-color-component-form-toggleswitch-fill-critical: #e44244;
+--ffe-color-component-button-action-border-default: #48a781;
+--ffe-color-component-button-action-border-hover: #2a7e5b;
+--ffe-color-component-button-action-border-pressed: #0d6346;
+--ffe-color-component-button-action-fill-default: #2a7e5b;
+--ffe-color-component-button-action-fill-hover: #0d6346;
+--ffe-color-component-button-action-fill-pressed: #0a4d37;
+--ffe-color-component-button-action-foreground-default: #ffffff;
+--ffe-color-component-button-action-foreground-hover: #ffffff;
+--ffe-color-component-button-primary-border-default: #084f91;
+--ffe-color-component-button-primary-border-hover: #04347c;
+--ffe-color-component-button-primary-border-pressed: #08235e;
+--ffe-color-component-button-primary-fill-default: #084f91;
+--ffe-color-component-button-primary-fill-hover: #073f83;
+--ffe-color-component-button-primary-fill-pressed: #082868;
+--ffe-color-component-button-primary-foreground-default: #ffffff;
+--ffe-color-component-button-primary-foreground-hover: #ffffff;
+--ffe-color-component-button-secondary-border-default: #08235e;
+--ffe-color-component-button-secondary-border-hover: #08235e;
+--ffe-color-component-button-secondary-border-pressed: #08235e;
+--ffe-color-component-button-secondary-fill-default: #ffffff00;
+--ffe-color-component-button-secondary-fill-hover: #d7e7f4;
+--ffe-color-component-button-secondary-fill-pressed: #c3d9ef;
+--ffe-color-component-button-secondary-foreground-default: #08235e;
+--ffe-color-component-button-secondary-foreground-hover: #08235e;
+--ffe-color-component-button-tertiary-fill-default: #ffffff00;
+--ffe-color-component-button-tertiary-fill-hover: #d7e7f4;
+--ffe-color-component-button-tertiary-fill-pressed: #c3d9ef;
+--ffe-color-component-button-tertiary-foreground-default: #08235e;
+--ffe-color-component-button-tertiary-foreground-hover: #08235e;
+--ffe-color-component-logo-name: #082868;
+--ffe-color-component-logo-number1: #ffffff;
 --ffe-color-component-logo-circle-dark-red: #af0000;
---ffe-color-component-logo-circle-light-red: #e60000;}
+--ffe-color-component-logo-circle-light-red: #e60000;
+--ffe-color-border-primary-default: #020a0a26;
+--ffe-color-border-primary-default-hover: #020a0a33;
+--ffe-color-border-primary-default-pressed: #020a0a40;
+--ffe-color-border-primary-subtle: #020a0a13;
+--ffe-color-border-primary-subtle-hover: #020a0a1a;
+--ffe-color-border-primary-subtle-pressed: #020a0a26;
+--ffe-color-border-primary-emphasis: #084f91;
+--ffe-color-border-feedback-info: #6096bd;
+--ffe-color-border-feedback-success: #48a781;
+--ffe-color-border-feedback-warning: #cc7205;
+--ffe-color-border-feedback-critical: #e44244;
+--ffe-color-border-feedback-tip: #a39db9;
+--ffe-color-border-interactive-focus: #dc8000;
+--ffe-color-border-interactive-selected: #084f91;
+}
-// Semantic
- :root,
-:host {
---ffe-color-default-brand-primary-subtlest: var(--ffe-color-vann-50);
---ffe-color-default-brand-primary-subtler: var(--ffe-color-vann-150);
---ffe-color-default-brand-primary-subtle: var(--ffe-color-vann-250);
---ffe-color-default-brand-primary-strong: var(--ffe-color-vann-600);
---ffe-color-default-brand-primary-stronger: var(--ffe-color-vann-700);
---ffe-color-default-brand-primary-strongest: var(--ffe-color-vann-800);
---ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-50);
---ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-75);
---ffe-color-default-brand-secondary-default: var(--ffe-color-frost-150);
---ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-250);
---ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-350);
---ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-450);
---ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-75);
---ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-150);
---ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-250);
---ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-450);
---ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-550);
---ffe-color-default-brand-emphasis-strong: var(--ffe-color-vann-550);
---ffe-color-default-brand-emphasis-stronger: var(--ffe-color-vann-650);
---ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-700);
---ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-50);
---ffe-color-default-feedback-info-subtler: var(--ffe-color-frost-100);
---ffe-color-default-feedback-info-strong: var(--ffe-color-frost-500);
---ffe-color-default-feedback-info-strongest: var(--ffe-color-frost-700);
---ffe-color-default-feedback-success-subtlest: var(--ffe-color-skog-50);
---ffe-color-default-feedback-success-subtler: var(--ffe-color-skog-100);
---ffe-color-default-feedback-success-medium: var(--ffe-color-skog-400);
---ffe-color-default-feedback-success-strong: var(--ffe-color-skog-550);
---ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-650);
---ffe-color-default-feedback-success-strongest: var(--ffe-color-skog-750);
---ffe-color-default-feedback-warning-subtlest: var(--ffe-color-sol-50);
---ffe-color-default-feedback-warning-subtler: var(--ffe-color-sol-100);
---ffe-color-default-feedback-warning-strong: var(--ffe-color-sol-500);
---ffe-color-default-feedback-warning-strongest: var(--ffe-color-sol-700);
---ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-50);
---ffe-color-default-feedback-critical-subtler: var(--ffe-color-baer-100);
---ffe-color-default-feedback-critical-medium: var(--ffe-color-baer-400);
---ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-500);
---ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-700);
---ffe-color-default-feedback-tip-sublest: var(--ffe-color-syrin-50);
---ffe-color-default-feedback-tip-subtler: var(--ffe-color-syrin-100);
---ffe-color-default-feedback-tip-strong: var(--ffe-color-syrin-500);
---ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-700);
---ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-600);
---ffe-color-default-neutral-subtlest: var(--ffe-color-gray-25);
---ffe-color-default-neutral-subtler: var(--ffe-color-gray-50);
---ffe-color-default-neutral-subtle: var(--ffe-color-gray-100);
---ffe-color-default-neutral-default: var(--ffe-color-gray-150);
---ffe-color-default-neutral-medium: var(--ffe-color-gray-300);
---ffe-color-default-neutral-strong: var(--ffe-color-gray-400);
---ffe-color-default-neutral-stronger: var(--ffe-color-gray-700);
---ffe-color-default-neutral-strongest: var(--ffe-color-gray-950);
---ffe-color-default-neutral-inverted: var(--ffe-color-alpha-white-1000);
---ffe-color-default-neutral-alpha-subtlest: var(--ffe-color-alpha-black-25);
---ffe-color-default-neutral-alpha-subtler: var(--ffe-color-alpha-black-50);
---ffe-color-default-neutral-alpha-subtle: var(--ffe-color-alpha-black-75);
---ffe-color-default-neutral-alpha-default: var(--ffe-color-alpha-black-100);
---ffe-color-default-neutral-alpha-medium: var(--ffe-color-alpha-black-200);
---ffe-color-default-neutral-alpha-strong: var(--ffe-color-alpha-black-300);
---ffe-color-default-neutral-alpha-stronger: var(--ffe-color-alpha-black-400);
---ffe-color-default-neutral-alpha-strongest: var(--ffe-color-alpha-black-500);
---ffe-color-default-interactive-default: var(--ffe-color-vann-600);
---ffe-color-default-interactive-hover: var(--ffe-color-vann-700);
---ffe-color-default-interactive-pressed: var(--ffe-color-vann-800);
---ffe-color-default-interactive-focus: var(--ffe-color-vann-800);
---ffe-color-default-interactive-selected-default: var(--ffe-color-vann-600);
---ffe-color-default-interactive-selected-hover: var(--ffe-color-vann-700);
---ffe-color-default-interactive-selected-pressed: var(--ffe-color-vann-800);
---ffe-color-accent-brand-primary-subtler: var(--ffe-color-vann-600);
---ffe-color-accent-brand-primary-subtle: var(--ffe-color-vann-500);
---ffe-color-accent-brand-primary-default: var(--ffe-color-vann-400);
---ffe-color-accent-brand-primary-strong: var(--ffe-color-vann-200);
---ffe-color-accent-brand-primary-stronger: var(--ffe-color-vann-100);
---ffe-color-accent-brand-primary-strongest: var(--ffe-color-vann-50);
---ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-650);
---ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-600);
---ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-550);
---ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-500);
---ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-100);
---ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-50);
---ffe-color-accent-brand-tertiary-subtle: var(--ffe-color-syrin-650);
---ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-600);
---ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-550);
---ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-150);
---ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-50);
---ffe-color-accent-brand-emphasis-strong: var(--ffe-color-vann-100);
---ffe-color-accent-brand-emphasis-stronger: var(--ffe-color-vann-75);
---ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-25);
---ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-600);
---ffe-color-accent-feedback-info-subtler: var(--ffe-color-frost-500);
---ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-150);
---ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-25);
---ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-700);
---ffe-color-accent-feedback-success-subtler: var(--ffe-color-skog-600);
---ffe-color-accent-feedback-success-subtle: var(--ffe-color-skog-550);
---ffe-color-accent-feedback-success-default: var(--ffe-color-skog-450);
---ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-200);
---ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-50);
---ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-700);
---ffe-color-accent-feedback-critical-subtler: var(--ffe-color-baer-600);
---ffe-color-accent-feedback-critical-default: var(--ffe-color-baer-400);
---ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-200);
---ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-50);
---ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-700);
---ffe-color-accent-feedback-warning-subtler: var(--ffe-color-sol-600);
---ffe-color-accent-feedback-warning-strong: var(--ffe-color-sol-200);
---ffe-color-accent-feedback-warning-strongest: var(--ffe-color-sol-50);
---ffe-color-accent-feedback-tip-sublest: var(--ffe-color-syrin-600);
---ffe-color-accent-feedback-tip-subtler: var(--ffe-color-syrin-550);
---ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-150);
---ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-50);
---ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-25);
---ffe-color-accent-neutral-alpha-subtlest: var(--ffe-color-alpha-white-25);
---ffe-color-accent-neutral-alpha-subtler: var(--ffe-color-alpha-white-50);
---ffe-color-accent-neutral-alpha-subtle: var(--ffe-color-alpha-white-75);
---ffe-color-accent-neutral-alpha-default: var(--ffe-color-alpha-white-100);
---ffe-color-accent-neutral-alpha-medium: var(--ffe-color-alpha-white-200);
---ffe-color-accent-neutral-alpha-strong: var(--ffe-color-alpha-white-300);
---ffe-color-accent-neutral-alpha-stronger: var(--ffe-color-alpha-white-400);
---ffe-color-accent-neutral-alpha-strongest: var(--ffe-color-alpha-white-500);
---ffe-color-accent-neutral-stronger: var(--ffe-color-alpha-white-800);
---ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-1000);
---ffe-color-accent-neutral-inverted: var(--ffe-color-vann-1000);
---ffe-color-accent-interactive-default: var(--ffe-color-vann-0);
---ffe-color-accent-interactive-hover: var(--ffe-color-vann-25);
---ffe-color-accent-interactive-pressed: var(--ffe-color-vann-50);
---ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-1000);
---ffe-color-accent-interactive-selected-default: var(--ffe-color-alpha-white-1000);
---ffe-color-accent-interactive-selected-hover: var(--ffe-color-vann-50);
---ffe-color-accent-interactive-selected-pressed: var(--ffe-color-vann-100);
---ffe-color-speciality-logo-name: var(--ffe-color-vann-800);
---ffe-color-speciality-background-default: var(--ffe-color-alpha-white-1000);
---ffe-color-speciality-background-subtle: var(--ffe-color-sand-25);
---ffe-color-speciality-background-accent: var(--ffe-color-vann-650);
---ffe-color-speciality-background-accent-subtle: var(--ffe-color-vann-700);
---ffe-color-speciality-background-transparent: var(--ffe-color-alpha-white-0);
---ffe-color-speciality-background-surface-primary-default: var(--ffe-color-alpha-white-1000);
---ffe-color-speciality-background-surface-primary-default-hover: var(--ffe-color-gray-25);
---ffe-color-speciality-background-surface-primary-default-pressed: var(--ffe-color-gray-50);
---ffe-color-speciality-background-surface-secondary-default: var(--ffe-color-frost-25);
---ffe-color-speciality-background-surface-secondary-default-hover: var(--ffe-color-frost-50);
---ffe-color-speciality-background-surface-secondary-default-pressed: var(--ffe-color-frost-75);
---ffe-color-speciality-background-surface-tertiary-default: var(--ffe-color-syrin-25);
---ffe-color-speciality-background-surface-tertiary-default-hover: var(--ffe-color-syrin-50);
---ffe-color-speciality-background-surface-tertiary-default-pressed: var(--ffe-color-syrin-75);
---ffe-color-speciality-background-surface-accent-accent: var(--ffe-color-vann-600);
---ffe-color-speciality-background-surface-accent-accent-hover: var(--ffe-color-vann-500);
---ffe-color-speciality-background-surface-accent-accent-pressed: var(--ffe-color-vann-400);
---ffe-color-speciality-buttons-primary-default-fill-default: var(--ffe-color-vann-600);
---ffe-color-speciality-buttons-primary-default-fill-hover: var(--ffe-color-vann-700);
---ffe-color-speciality-buttons-primary-default-fill-pressed: var(--ffe-color-vann-800);
---ffe-color-speciality-buttons-primary-accent-fill-default: var(--ffe-color-vann-25);
---ffe-color-speciality-buttons-primary-accent-fill-hover: var(--ffe-color-vann-75);
---ffe-color-speciality-buttons-primary-accent-fill-pressed: var(--ffe-color-vann-100);
---ffe-color-speciality-buttons-primary-accent-foreground-default: var(--ffe-color-vann-850);
---ffe-color-speciality-buttons-secondary-default-border-default: var(--ffe-color-vann-600);
---ffe-color-speciality-buttons-secondary-default-fill-default: var(--ffe-color-alpha-white-0);
---ffe-color-speciality-buttons-secondary-default-fill-hover: var(--ffe-color-alpha-water-100);
---ffe-color-speciality-buttons-secondary-default-fill-pressed: var(--ffe-color-alpha-water-200);
---ffe-color-speciality-buttons-secondary-default-foreground-default: var(--ffe-color-vann-700);
---ffe-color-speciality-buttons-secondary-accent-border-default: var(--ffe-color-alpha-white-1000);
---ffe-color-speciality-buttons-secondary-accent-fill-default: var(--ffe-color-alpha-white-0);
---ffe-color-speciality-buttons-secondary-accent-fill-hover: var(--ffe-color-alpha-white-100);
---ffe-color-speciality-buttons-secondary-accent-fill-pressed: var(--ffe-color-alpha-white-200);
---ffe-color-speciality-buttons-secondary-accent-foreground-default: var(--ffe-color-alpha-white-1000);
---ffe-color-speciality-buttons-tertiary-default-fill-default: var(--ffe-color-alpha-white-0);
---ffe-color-speciality-buttons-tertiary-default-fill-hover: var(--ffe-color-alpha-water-100);
---ffe-color-speciality-buttons-tertiary-default-fill-pressed: var(--ffe-color-alpha-water-200);
---ffe-color-speciality-buttons-tertiary-default-foreground-default: var(--ffe-color-vann-700);
---ffe-color-speciality-buttons-tertiary-accent-fill-default: var(--ffe-color-alpha-white-0);
---ffe-color-speciality-buttons-tertiary-accent-fill-hover: var(--ffe-color-alpha-white-100);
---ffe-color-speciality-buttons-tertiary-accent-fill-pressed: var(--ffe-color-alpha-white-200);
---ffe-color-speciality-buttons-tertiary-accent-foreground-default: var(--ffe-color-alpha-white-1000);
---ffe-color-speciality-static-alpha-white-default: var(--ffe-color-alpha-white-200);
---ffe-color-speciality-static-alpha-white-medium: var(--ffe-color-alpha-white-400);
---ffe-color-speciality-static-alpha-white-strong: var(--ffe-color-alpha-white-600);
---ffe-color-speciality-static-alpha-white-stronger: var(--ffe-color-alpha-white-700);
---ffe-color-speciality-static-neutral-white: var(--ffe-color-alpha-white-1000);
+/* Accent context */
+.ffe-accent-mode {
+  --ffe-color-background-default: #084f91;
+--ffe-color-background-subtle: #073f83;
+--ffe-color-surface-primary-default: #005aa4;
+--ffe-color-surface-primary-default-hover: #1566b2;
+--ffe-color-surface-primary-default-pressed: #2975c2;
+--ffe-color-surface-secondary-default: #234f71;
+--ffe-color-surface-secondary-default-hover: #1b4462;
+--ffe-color-surface-secondary-default-pressed: #163853;
+--ffe-color-surface-tertiary-default: #45415a;
+--ffe-color-surface-tertiary-default-hover: #3c374e;
+--ffe-color-surface-tertiary-default-pressed: #312c44;
+--ffe-color-surface-neutral-default: #04347c;
+--ffe-color-surface-neutral-default-hover: #073f83;
+--ffe-color-surface-neutral-default-pressed: #084f91;
+--ffe-color-surface-feedback-info: #234f71;
+--ffe-color-surface-feedback-success: #09583b;
+--ffe-color-surface-feedback-warning: #682c00;
+--ffe-color-surface-feedback-critical: #7c1214;
+--ffe-color-surface-feedback-tip: #45415a;
+--ffe-color-fill-primary-default: #2975c2;
+--ffe-color-fill-primary-default-hover: #9ec2e5;
+--ffe-color-fill-primary-default-pressed: #c3d9ef;
+--ffe-color-fill-primary-selected-default: #ffffff;
+--ffe-color-fill-primary-selected-hover: #d7e7f4;
+--ffe-color-fill-primary-selected-pressed: #c3d9ef;
+--ffe-color-fill-primary-subtle: #ffffff1a;
+--ffe-color-fill-primary-subtle-hover: #ffffff26;
+--ffe-color-fill-primary-subtle-pressed: #ffffff33;
+--ffe-color-fill-primary-invisible: #ffffff00;
+--ffe-color-fill-secondary-default: #457aa1;
+--ffe-color-fill-secondary-default-hover: #a6cee2;
+--ffe-color-fill-secondary-default-pressed: #c3dfea;
+--ffe-color-fill-secondary-subtle: #2b5a7c;
+--ffe-color-fill-secondary-subtle-hover: #356488;
+--ffe-color-fill-secondary-subtle-pressed: #3b6f96;
+--ffe-color-fill-tertiary-default: #7b718e;
+--ffe-color-fill-tertiary-default-hover: #c1c1dc;
+--ffe-color-fill-tertiary-default-pressed: #d3d3ea;
+--ffe-color-fill-tertiary-subtle: #4e4a64;
+--ffe-color-fill-tertiary-subtle-hover: #5a5671;
+--ffe-color-fill-tertiary-subtle-pressed: #665d79;
+--ffe-color-fill-neutral-default: #ffffff33;
+--ffe-color-fill-neutral-default-hover: #ffffff40;
+--ffe-color-fill-neutral-default-pressed: #ffffff4d;
+--ffe-color-fill-neutral-subtle: #ffffff13;
+--ffe-color-fill-neutral-subtle-hover: #ffffff1a;
+--ffe-color-fill-neutral-subtle-pressed: #ffffff26;
+--ffe-color-fill-neutral-extra-subtle: #ffffff06;
+--ffe-color-fill-neutral-extra-subtle-hover: #ffffff0d;
+--ffe-color-fill-neutral-extra-subtle-pressed: #ffffff13;
+--ffe-color-fill-feedback-info: #a6cee2;
+--ffe-color-fill-feedback-info-subtle: #356488;
+--ffe-color-fill-feedback-success: #8fd1b1;
+--ffe-color-fill-feedback-success-subtle: #00754e;
+--ffe-color-fill-feedback-warning: #f6ac3c;
+--ffe-color-fill-feedback-warning-subtle: #853f00;
+--ffe-color-fill-feedback-critical: #ff7f7a;
+--ffe-color-fill-feedback-critical-subtle: #a01c1f;
+--ffe-color-fill-feedback-tip: #d3d3ea;
+--ffe-color-fill-feedback-tip-subtle: #5a5671;
+--ffe-color-foreground-default: #ffffff;
+--ffe-color-foreground-subtle: #ffffffcc;
+--ffe-color-foreground-emphasis: #d7e7f4;
+--ffe-color-foreground-inverse: #020a0a;
+--ffe-color-foreground-interactive-link: #f7fafd;
+--ffe-color-foreground-interactive-link-hover: #e7f1f9;
+--ffe-color-foreground-interactive-link-pressed: #d7e7f4;
+--ffe-color-foreground-interactive-link-active: #ffffff;
+--ffe-color-foreground-feedback-info: #dceaef;
+--ffe-color-foreground-feedback-success: #cbf0df;
+--ffe-color-foreground-feedback-warning: #ffe0b2;
+--ffe-color-foreground-feedback-critical: #ffd5d1;
+--ffe-color-foreground-feedback-tip: #e6e6f4;
+--ffe-color-component-form-input-foreground-default: #1f1f1f;
+--ffe-color-component-form-input-foreground-subtle: #525252;
+--ffe-color-component-form-input-foreground-placeholder: #8f8f8f;
+--ffe-color-component-form-input-foreground-disabled: #a4a4a4;
+--ffe-color-component-form-input-foreground-read-only: #525252;
+--ffe-color-component-form-input-foreground-error: #7c1214;
+--ffe-color-component-form-input-border-active: #7dabd9;
+--ffe-color-component-form-input-fill-default: #ffffff;
+--ffe-color-component-form-input-fill-default-hover: #e7f1f9;
+--ffe-color-component-form-input-fill-default-pressed: #d7e7f4;
+--ffe-color-component-form-input-fill-disabled: #d6d6d6;
+--ffe-color-component-form-input-fill-read-only: #e5e5e5;
+--ffe-color-component-form-input-fill-error: #ffe3e0;
+--ffe-color-component-form-toggleswitch-handle-default: #ffffff;
+--ffe-color-component-form-toggleswitch-fill-default: #c2c2c2;
+--ffe-color-component-form-toggleswitch-fill-default-hover: #a4a4a4;
+--ffe-color-component-form-toggleswitch-fill-default-pressed: #8f8f8f;
+--ffe-color-component-form-toggleswitch-fill-selected: #48a781;
+--ffe-color-component-form-toggleswitch-fill-selected-hover: #2a7e5b;
+--ffe-color-component-form-toggleswitch-fill-selected-pressed: #0d6346;
+--ffe-color-component-form-toggleswitch-fill-critical: #ff5e5c;
+--ffe-color-component-button-action-border-default: #48a781;
+--ffe-color-component-button-action-border-hover: #2a7e5b;
+--ffe-color-component-button-action-border-pressed: #0d6346;
+--ffe-color-component-button-action-fill-default: #00754e;
+--ffe-color-component-button-action-fill-hover: #2a7e5b;
+--ffe-color-component-button-action-fill-pressed: #409674;
+--ffe-color-component-button-action-foreground-default: #ffffff;
+--ffe-color-component-button-action-foreground-hover: #ffffff;
+--ffe-color-component-button-primary-border-default: #c3d9ef;
+--ffe-color-component-button-primary-border-hover: #cfe2f2;
+--ffe-color-component-button-primary-border-pressed: #d7e7f4;
+--ffe-color-component-button-primary-fill-default: #f7fafd;
+--ffe-color-component-button-primary-fill-hover: #d7e7f4;
+--ffe-color-component-button-primary-fill-pressed: #c3d9ef;
+--ffe-color-component-button-primary-foreground-default: #08235e;
+--ffe-color-component-button-primary-foreground-hover: #08235e;
+--ffe-color-component-button-secondary-border-default: #ffffff;
+--ffe-color-component-button-secondary-border-hover: #ffffff;
+--ffe-color-component-button-secondary-border-pressed: #ffffff;
+--ffe-color-component-button-secondary-fill-default: #ffffff00;
+--ffe-color-component-button-secondary-fill-hover: #1566b2;
+--ffe-color-component-button-secondary-fill-pressed: #2975c2;
+--ffe-color-component-button-secondary-foreground-default: #ffffff;
+--ffe-color-component-button-secondary-foreground-hover: #ffffff;
+--ffe-color-component-button-tertiary-fill-default: #ffffff00;
+--ffe-color-component-button-tertiary-fill-hover: #1566b2;
+--ffe-color-component-button-tertiary-fill-pressed: #2975c2;
+--ffe-color-component-button-tertiary-foreground-default: #ffffff;
+--ffe-color-component-button-tertiary-foreground-hover: #ffffff;
+--ffe-color-component-logo-name: #ffffff;
+--ffe-color-component-logo-number1: #ffffff;
+--ffe-color-component-logo-circle-dark-red: #af0000;
+--ffe-color-component-logo-circle-light-red: #e60000;
+--ffe-color-border-primary-default: #ffffff26;
+--ffe-color-border-primary-default-hover: #ffffff33;
+--ffe-color-border-primary-default-pressed: #ffffff40;
+--ffe-color-border-primary-subtle: #ffffff13;
+--ffe-color-border-primary-subtle-hover: #ffffff1a;
+--ffe-color-border-primary-subtle-pressed: #ffffff26;
+--ffe-color-border-primary-emphasis: #c3d9ef;
+--ffe-color-border-feedback-info: #7eb5d2;
+--ffe-color-border-feedback-success: #6abe97;
+--ffe-color-border-feedback-warning: #ea910b;
+--ffe-color-border-feedback-critical: #ff5e5c;
+--ffe-color-border-feedback-tip: #b4aecb;
+--ffe-color-border-interactive-focus: #f6ac3c;
+--ffe-color-border-interactive-selected: #c3d9ef;
 }
-// Semantic dark
-  @media (prefers-color-scheme: dark) {
-:where(.regard-color-scheme-preference){
---ffe-color-default-brand-primary-subtlest: var(--ffe-color-vann-800);
---ffe-color-default-brand-primary-subtler: var(--ffe-color-vann-700);
---ffe-color-default-brand-primary-subtle: var(--ffe-color-vann-600);
---ffe-color-default-brand-primary-strong: var(--ffe-color-vann-300);
---ffe-color-default-brand-primary-stronger: var(--ffe-color-vann-200);
---ffe-color-default-brand-primary-strongest: var(--ffe-color-vann-100);
---ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-800);
---ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-700);
---ffe-color-default-brand-secondary-default: var(--ffe-color-frost-600);
---ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-500);
---ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-300);
---ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-200);
---ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-750);
---ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-650);
---ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-550);
---ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-300);
---ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-200);
---ffe-color-default-brand-emphasis-strong: var(--ffe-color-vann-300);
---ffe-color-default-brand-emphasis-stronger: var(--ffe-color-vann-150);
---ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-75);
---ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-800);
---ffe-color-default-feedback-info-subtler: var(--ffe-color-frost-700);
---ffe-color-default-feedback-info-strong: var(--ffe-color-frost-300);
---ffe-color-default-feedback-info-strongest: var(--ffe-color-frost-100);
---ffe-color-default-feedback-success-subtlest: var(--ffe-color-skog-800);
---ffe-color-default-feedback-success-subtler: var(--ffe-color-skog-700);
---ffe-color-default-feedback-success-medium: var(--ffe-color-skog-400);
---ffe-color-default-feedback-success-strong: var(--ffe-color-skog-300);
---ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-200);
---ffe-color-default-feedback-success-strongest: var(--ffe-color-skog-100);
---ffe-color-default-feedback-warning-subtlest: var(--ffe-color-sol-750);
---ffe-color-default-feedback-warning-subtler: var(--ffe-color-sol-650);
---ffe-color-default-feedback-warning-strong: var(--ffe-color-sol-250);
---ffe-color-default-feedback-warning-strongest: var(--ffe-color-sol-100);
---ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-800);
---ffe-color-default-feedback-critical-subtler: var(--ffe-color-baer-700);
---ffe-color-default-feedback-critical-medium: var(--ffe-color-baer-400);
---ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-300);
---ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-100);
---ffe-color-default-feedback-tip-sublest: var(--ffe-color-syrin-800);
---ffe-color-default-feedback-tip-subtler: var(--ffe-color-syrin-700);
---ffe-color-default-feedback-tip-strong: var(--ffe-color-syrin-300);
---ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-100);
---ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-200);
---ffe-color-default-neutral-subtlest: var(--ffe-color-gray-900);
---ffe-color-default-neutral-subtler: var(--ffe-color-gray-750);
---ffe-color-default-neutral-subtle: var(--ffe-color-gray-650);
---ffe-color-default-neutral-default: var(--ffe-color-gray-500);
---ffe-color-default-neutral-medium: var(--ffe-color-gray-400);
---ffe-color-default-neutral-strong: var(--ffe-color-gray-250);
---ffe-color-default-neutral-stronger: var(--ffe-color-gray-150);
---ffe-color-default-neutral-strongest: var(--ffe-color-alpha-white-1000);
---ffe-color-default-neutral-inverted: var(--ffe-color-gray-1000);
---ffe-color-default-neutral-alpha-subtlest: var(--ffe-color-alpha-white-25);
---ffe-color-default-neutral-alpha-subtler: var(--ffe-color-alpha-white-50);
---ffe-color-default-neutral-alpha-subtle: var(--ffe-color-alpha-white-75);
---ffe-color-default-neutral-alpha-default: var(--ffe-color-alpha-white-100);
---ffe-color-default-neutral-alpha-medium: var(--ffe-color-alpha-white-200);
---ffe-color-default-neutral-alpha-strong: var(--ffe-color-alpha-white-300);
---ffe-color-default-neutral-alpha-stronger: var(--ffe-color-alpha-white-400);
---ffe-color-default-neutral-alpha-strongest: var(--ffe-color-alpha-white-500);
---ffe-color-default-interactive-default: var(--ffe-color-vann-400);
---ffe-color-default-interactive-hover: var(--ffe-color-vann-300);
---ffe-color-default-interactive-pressed: var(--ffe-color-vann-200);
---ffe-color-default-interactive-focus: var(--ffe-color-alpha-white-1000);
---ffe-color-default-interactive-selected-default: var(--ffe-color-alpha-white-1000);
---ffe-color-default-interactive-selected-hover: var(--ffe-color-vann-50);
---ffe-color-default-interactive-selected-pressed: var(--ffe-color-vann-100);
---ffe-color-accent-brand-primary-subtler: var(--ffe-color-vann-700);
---ffe-color-accent-brand-primary-subtle: var(--ffe-color-vann-600);
---ffe-color-accent-brand-primary-default: var(--ffe-color-vann-500);
---ffe-color-accent-brand-primary-strong: var(--ffe-color-vann-300);
---ffe-color-accent-brand-primary-stronger: var(--ffe-color-vann-200);
---ffe-color-accent-brand-primary-strongest: var(--ffe-color-vann-100);
---ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-800);
---ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-700);
---ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-600);
---ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-500);
---ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-300);
---ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-200);
---ffe-color-accent-brand-tertiary-subtle: var(--ffe-color-syrin-750);
---ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-650);
---ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-550);
---ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-300);
---ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-200);
---ffe-color-accent-brand-emphasis-strong: var(--ffe-color-vann-300);
---ffe-color-accent-brand-emphasis-stronger: var(--ffe-color-vann-150);
---ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-75);
---ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-800);
---ffe-color-accent-feedback-info-subtler: var(--ffe-color-frost-700);
---ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-300);
---ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-100);
---ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-800);
---ffe-color-accent-feedback-success-subtler: var(--ffe-color-skog-700);
---ffe-color-accent-feedback-success-subtle: var(--ffe-color-skog-550);
---ffe-color-accent-feedback-success-default: var(--ffe-color-skog-500);
---ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-300);
---ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-100);
---ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-800);
---ffe-color-accent-feedback-critical-subtler: var(--ffe-color-baer-700);
---ffe-color-accent-feedback-critical-default: var(--ffe-color-baer-500);
---ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-300);
---ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-100);
---ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-750);
---ffe-color-accent-feedback-warning-subtler: var(--ffe-color-sol-650);
---ffe-color-accent-feedback-warning-strong: var(--ffe-color-sol-250);
---ffe-color-accent-feedback-warning-strongest: var(--ffe-color-sol-100);
---ffe-color-accent-feedback-tip-sublest: var(--ffe-color-syrin-800);
---ffe-color-accent-feedback-tip-subtler: var(--ffe-color-syrin-700);
---ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-300);
---ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-200);
---ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-100);
---ffe-color-accent-neutral-alpha-subtlest: var(--ffe-color-alpha-white-25);
---ffe-color-accent-neutral-alpha-subtler: var(--ffe-color-alpha-white-50);
---ffe-color-accent-neutral-alpha-subtle: var(--ffe-color-alpha-white-75);
---ffe-color-accent-neutral-alpha-default: var(--ffe-color-alpha-white-100);
---ffe-color-accent-neutral-alpha-medium: var(--ffe-color-alpha-white-200);
---ffe-color-accent-neutral-alpha-strong: var(--ffe-color-alpha-white-300);
---ffe-color-accent-neutral-alpha-stronger: var(--ffe-color-alpha-white-400);
---ffe-color-accent-neutral-alpha-strongest: var(--ffe-color-alpha-white-500);
---ffe-color-accent-neutral-stronger: var(--ffe-color-gray-150);
---ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-1000);
---ffe-color-accent-neutral-inverted: var(--ffe-color-gray-1000);
---ffe-color-accent-interactive-default: var(--ffe-color-vann-300);
---ffe-color-accent-interactive-hover: var(--ffe-color-vann-400);
---ffe-color-accent-interactive-pressed: var(--ffe-color-vann-500);
---ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-1000);
---ffe-color-accent-interactive-selected-default: var(--ffe-color-alpha-white-1000);
---ffe-color-accent-interactive-selected-hover: var(--ffe-color-vann-50);
---ffe-color-accent-interactive-selected-pressed: var(--ffe-color-vann-100);
---ffe-color-speciality-logo-name: var(--ffe-color-alpha-white-1000);
---ffe-color-speciality-background-default: var(--ffe-color-alpha-black-1000);
---ffe-color-speciality-background-subtle: var(--ffe-color-gray-950);
---ffe-color-speciality-background-accent: var(--ffe-color-gray-1000);
---ffe-color-speciality-background-accent-subtle: var(--ffe-color-gray-950);
---ffe-color-speciality-background-transparent: var(--ffe-color-alpha-white-0);
---ffe-color-speciality-background-surface-primary-default: var(--ffe-color-gray-900);
---ffe-color-speciality-background-surface-primary-default-hover: var(--ffe-color-gray-800);
---ffe-color-speciality-background-surface-primary-default-pressed: var(--ffe-color-gray-700);
---ffe-color-speciality-background-surface-secondary-default: var(--ffe-color-gray-900);
---ffe-color-speciality-background-surface-secondary-default-hover: var(--ffe-color-gray-800);
---ffe-color-speciality-background-surface-secondary-default-pressed: var(--ffe-color-gray-700);
---ffe-color-speciality-background-surface-tertiary-default: var(--ffe-color-gray-900);
---ffe-color-speciality-background-surface-tertiary-default-hover: var(--ffe-color-gray-800);
---ffe-color-speciality-background-surface-tertiary-default-pressed: var(--ffe-color-gray-700);
---ffe-color-speciality-background-surface-accent-accent: var(--ffe-color-gray-900);
---ffe-color-speciality-background-surface-accent-accent-hover: var(--ffe-color-gray-800);
---ffe-color-speciality-background-surface-accent-accent-pressed: var(--ffe-color-gray-700);
---ffe-color-speciality-buttons-primary-default-fill-default: var(--ffe-color-vann-550);
---ffe-color-speciality-buttons-primary-default-fill-hover: var(--ffe-color-vann-500);
---ffe-color-speciality-buttons-primary-default-fill-pressed: var(--ffe-color-vann-400);
---ffe-color-speciality-buttons-primary-accent-fill-default: var(--ffe-color-vann-550);
---ffe-color-speciality-buttons-primary-accent-fill-hover: var(--ffe-color-vann-500);
---ffe-color-speciality-buttons-primary-accent-fill-pressed: var(--ffe-color-vann-400);
---ffe-color-speciality-buttons-primary-accent-foreground-default: var(--ffe-color-alpha-white-1000);
---ffe-color-speciality-buttons-secondary-default-border-default: var(--ffe-color-vann-300);
---ffe-color-speciality-buttons-secondary-default-fill-default: var(--ffe-color-alpha-white-0);
---ffe-color-speciality-buttons-secondary-default-fill-hover: var(--ffe-color-alpha-white-100);
---ffe-color-speciality-buttons-secondary-default-fill-pressed: var(--ffe-color-alpha-white-200);
---ffe-color-speciality-buttons-secondary-default-foreground-default: var(--ffe-color-vann-100);
---ffe-color-speciality-buttons-secondary-accent-border-default: var(--ffe-color-vann-300);
---ffe-color-speciality-buttons-secondary-accent-fill-default: var(--ffe-color-alpha-white-0);
---ffe-color-speciality-buttons-secondary-accent-fill-hover: var(--ffe-color-alpha-white-100);
---ffe-color-speciality-buttons-secondary-accent-fill-pressed: var(--ffe-color-alpha-white-200);
---ffe-color-speciality-buttons-secondary-accent-foreground-default: var(--ffe-color-vann-100);
---ffe-color-speciality-buttons-tertiary-default-fill-default: var(--ffe-color-alpha-white-0);
---ffe-color-speciality-buttons-tertiary-default-fill-hover: var(--ffe-color-alpha-white-100);
---ffe-color-speciality-buttons-tertiary-default-fill-pressed: var(--ffe-color-alpha-white-200);
---ffe-color-speciality-buttons-tertiary-default-foreground-default: var(--ffe-color-vann-100);
---ffe-color-speciality-buttons-tertiary-accent-fill-default: var(--ffe-color-alpha-white-0);
---ffe-color-speciality-buttons-tertiary-accent-fill-hover: var(--ffe-color-alpha-white-100);
---ffe-color-speciality-buttons-tertiary-accent-fill-pressed: var(--ffe-color-alpha-white-200);
---ffe-color-speciality-buttons-tertiary-accent-foreground-default: var(--ffe-color-vann-100);
---ffe-color-speciality-static-alpha-white-default: var(--ffe-color-alpha-white-200);
---ffe-color-speciality-static-alpha-white-medium: var(--ffe-color-alpha-white-400);
---ffe-color-speciality-static-alpha-white-strong: var(--ffe-color-alpha-white-600);
---ffe-color-speciality-static-alpha-white-stronger: var(--ffe-color-alpha-white-700);
---ffe-color-speciality-static-neutral-white: var(--ffe-color-alpha-white-1000);
-//inlined context to make darkmode work
---ffe-color-background-default: var(--ffe-color-speciality-background-default);
---ffe-color-background-subtle: var(--ffe-color-speciality-background-subtle);
---ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-primary-default);
---ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-primary-default-hover);
---ffe-color-surface-primary-default-pressed: var(--ffe-color-speciality-background-surface-primary-default-pressed);
---ffe-color-surface-secondary-default: var(--ffe-color-speciality-background-surface-secondary-default);
---ffe-color-surface-secondary-hover: var(--ffe-color-speciality-background-surface-secondary-default-hover);
---ffe-color-surface-secondary-pressed: var(--ffe-color-speciality-background-surface-secondary-default-pressed);
---ffe-color-surface-tertiary-default: var(--ffe-color-speciality-background-surface-tertiary-default);
---ffe-color-surface-tertiary-hover: var(--ffe-color-speciality-background-surface-tertiary-default-hover);
---ffe-color-surface-tertiary-pressed: var(--ffe-color-speciality-background-surface-tertiary-default-pressed);
---ffe-color-surface-feedback-info: var(--ffe-color-default-feedback-info-subtlest);
---ffe-color-surface-feedback-success: var(--ffe-color-default-feedback-success-subtlest);
---ffe-color-surface-feedback-warning: var(--ffe-color-default-feedback-warning-subtlest);
---ffe-color-surface-feedback-critical: var(--ffe-color-default-feedback-critical-subtlest);
---ffe-color-surface-feedback-tip: var(--ffe-color-default-feedback-tip-sublest);
---ffe-color-fill-primary-default: var(--ffe-color-default-brand-primary-strong);
---ffe-color-fill-primary-hover: var(--ffe-color-default-brand-primary-stronger);
---ffe-color-fill-primary-pressed: var(--ffe-color-default-brand-primary-strongest);
---ffe-color-fill-primary-selected-default: var(--ffe-color-default-interactive-selected-default);
---ffe-color-fill-primary-selected-hover: var(--ffe-color-default-interactive-selected-hover);
---ffe-color-fill-primary-selected-pressed: var(--ffe-color-default-interactive-selected-pressed);
---ffe-color-fill-primary-subtle: var(--ffe-color-default-brand-primary-subtlest);
---ffe-color-fill-primary-subtle-hover: var(--ffe-color-default-brand-primary-subtler);
---ffe-color-fill-primary-subtle-pressed: var(--ffe-color-default-brand-primary-subtle);
---ffe-color-fill-primary-invisible: var(--ffe-color-speciality-background-transparent);
---ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-medium);
---ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-strong);
---ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-stronger);
---ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtler);
---ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtle);
---ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-default);
---ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-medium);
---ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-strong);
---ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-stronger);
---ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
---ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
---ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
---ffe-color-fill-neutral-default: var(--ffe-color-default-neutral-alpha-strong);
---ffe-color-fill-neutral-default-hover: var(--ffe-color-default-neutral-alpha-stronger);
---ffe-color-fill-neutral-default-pressed: var(--ffe-color-default-neutral-alpha-strongest);
---ffe-color-fill-neutral-subtle: var(--ffe-color-default-neutral-alpha-default);
---ffe-color-fill-neutral-subtle-hover: var(--ffe-color-default-neutral-alpha-medium);
---ffe-color-fill-neutral-subtle-pressed: var(--ffe-color-default-neutral-alpha-strong);
---ffe-color-fill-neutral-extra-subtle: var(--ffe-color-default-neutral-alpha-subtlest);
---ffe-color-fill-neutral-extra-subtle-hover: var(--ffe-color-default-neutral-alpha-subtler);
---ffe-color-fill-neutral-extra-subtle-pressed: var(--ffe-color-default-neutral-alpha-subtle);
---ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
---ffe-color-fill-feedback-info-subtle: var(--ffe-color-default-feedback-info-subtler);
---ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
---ffe-color-fill-feedback-success-subtle: var(--ffe-color-default-feedback-success-subtler);
---ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
---ffe-color-fill-feedback-warning-subtle: var(--ffe-color-default-feedback-warning-subtler);
---ffe-color-fill-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
---ffe-color-fill-feedback-critical-subtle: var(--ffe-color-default-feedback-critical-subtler);
---ffe-color-fill-feedback-tip: var(--ffe-color-default-feedback-tip-stronger);
---ffe-color-fill-feedback-tip-subtle: var(--ffe-color-default-feedback-tip-subtler);
---ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
---ffe-color-foreground-subtle: var(--ffe-color-default-neutral-stronger);
---ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-stronger);
---ffe-color-foreground-inverse: var(--ffe-color-default-neutral-subtlest);
---ffe-color-foreground-on-fill-default: var(--ffe-color-default-neutral-inverted);
---ffe-color-foreground-on-fill-inverse: var(--ffe-color-default-neutral-strongest);
---ffe-color-foreground-interactive-link: var(--ffe-color-default-interactive-default);
---ffe-color-foreground-interactive-link-hover: var(--ffe-color-default-interactive-hover);
---ffe-color-foreground-interactive-link-pressed: var(--ffe-color-default-interactive-pressed);
---ffe-color-foreground-interactive-link-active: var(--ffe-color-default-interactive-selected-default);
---ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
---ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
---ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
---ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
---ffe-color-foreground-feedback-tip: var(--ffe-color-default-feedback-tip-strongest);
---ffe-color-border-primary-default: var(--ffe-color-default-neutral-default);
---ffe-color-border-primary-default-hover: var(--ffe-color-default-neutral-medium);
---ffe-color-border-primary-default-pressed: var(--ffe-color-default-neutral-strong);
---ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtler);
---ffe-color-border-primary-subtle-hover: var(--ffe-color-default-neutral-subtle);
---ffe-color-border-primary-subtle-pressed: var(--ffe-color-default-neutral-default);
---ffe-color-border-primary-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
---ffe-color-border-secondary-default: var(--ffe-color-default-brand-secondary-medium);
---ffe-color-border-secondary-hover: var(--ffe-color-default-brand-secondary-strong);
---ffe-color-border-secondary-pressed: var(--ffe-color-default-brand-secondary-stronger);
---ffe-color-border-tertiary-default: var(--ffe-color-default-brand-tertiary-medium);
---ffe-color-border-tertiary-hover: var(--ffe-color-default-brand-tertiary-strong);
---ffe-color-border-tertiary-pressed: var(--ffe-color-default-brand-tertiary-stronger);
---ffe-color-border-interactive-focus: var(--ffe-color-default-interactive-focus);
---ffe-color-border-interactive-selected: var(--ffe-color-default-brand-primary-stronger);
---ffe-color-border-feedback-info: var(--ffe-color-default-feedback-info-strong);
---ffe-color-border-feedback-success: var(--ffe-color-default-feedback-success-strong);
---ffe-color-border-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
---ffe-color-border-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
---ffe-color-border-feedback-tip: var(--ffe-color-default-feedback-tip-strong);
---ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-medium);
---ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-strong);
---ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-stronger);
---ffe-color-component-button-action-fill-default: var(--ffe-color-accent-feedback-success-subtle);
---ffe-color-component-button-action-fill-hover: var(--ffe-color-accent-feedback-success-subtler);
---ffe-color-component-button-action-fill-pressed: var(--ffe-color-accent-feedback-success-subtle);
---ffe-color-component-button-action-foreground-default: var(--ffe-color-speciality-static-neutral-white);
---ffe-color-component-button-action-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
---ffe-color-component-button-primary-border-default: var(--ffe-color-default-brand-emphasis-strong);
---ffe-color-component-button-primary-border-hover: var(--ffe-color-default-brand-emphasis-stronger);
---ffe-color-component-button-primary-border-pressed: var(--ffe-color-default-brand-emphasis-strongest);
---ffe-color-component-button-primary-fill-default: var(--ffe-color-speciality-buttons-primary-default-fill-default);
---ffe-color-component-button-primary-fill-hover: var(--ffe-color-speciality-buttons-primary-default-fill-hover);
---ffe-color-component-button-primary-fill-pressed: var(--ffe-color-speciality-buttons-primary-default-fill-pressed);
---ffe-color-component-button-primary-foreground-default: var(--ffe-color-speciality-static-neutral-white);
---ffe-color-component-button-primary-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
---ffe-color-component-button-secondary-border-default: var(--ffe-color-speciality-buttons-secondary-default-border-default);
---ffe-color-component-button-secondary-border-hover: var(--ffe-color-speciality-buttons-secondary-default-border-default);
---ffe-color-component-button-secondary-border-pressed: var(--ffe-color-speciality-buttons-secondary-default-border-default);
---ffe-color-component-button-secondary-fill-default: var(--ffe-color-speciality-buttons-secondary-default-fill-default);
---ffe-color-component-button-secondary-fill-hover: var(--ffe-color-speciality-buttons-secondary-default-fill-hover);
---ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-speciality-buttons-secondary-default-fill-pressed);
---ffe-color-component-button-secondary-foreground-default: var(--ffe-color-speciality-buttons-secondary-default-foreground-default);
---ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-speciality-buttons-secondary-default-foreground-default);
---ffe-color-component-button-tertiary-fill-default: var(--ffe-color-speciality-buttons-tertiary-default-fill-default);
---ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-speciality-buttons-tertiary-default-fill-hover);
---ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-speciality-buttons-tertiary-default-fill-pressed);
---ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-speciality-buttons-tertiary-default-foreground-default);
---ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-speciality-buttons-tertiary-default-foreground-default);
---ffe-color-component-toggleswitch-handle-default: var(--ffe-color-speciality-static-neutral-white);
---ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-medium);
---ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-strong);
---ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-medium);
---ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-accent-feedback-success-default);
---ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-accent-feedback-success-subtle);
---ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-feedback-success-default);
---ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-default-feedback-critical-medium);
---ffe-color-component-logo-name: var(--ffe-color-speciality-logo-name);
---ffe-color-component-logo-number1: var(--ffe-color-alpha-white-1000);
+/* dark mode default context */
+@media (prefers-color-scheme: dark) {
+    .regard-color-scheme-preference,
+    .regard-color-scheme-preference .ffe-default-mode {
+    --ffe-color-background-default: #020a0a;
+--ffe-color-background-subtle: #1f1f1f;
+--ffe-color-surface-primary-default: #292929;
+--ffe-color-surface-primary-default-hover: #333333;
+--ffe-color-surface-primary-default-pressed: #3d3d3d;
+--ffe-color-surface-secondary-default: #0c2232;
+--ffe-color-surface-secondary-default-hover: #102d43;
+--ffe-color-surface-secondary-default-pressed: #163853;
+--ffe-color-surface-tertiary-default: #1d192f;
+--ffe-color-surface-tertiary-default-hover: #27223a;
+--ffe-color-surface-tertiary-default-pressed: #312c44;
+--ffe-color-surface-neutral-default: #3d3d3d;
+--ffe-color-surface-neutral-default-hover: #474747;
+--ffe-color-surface-neutral-default-pressed: #525252;
+--ffe-color-surface-feedback-info: #163853;
+--ffe-color-surface-feedback-success: #0a4330;
+--ffe-color-surface-feedback-warning: #491c00;
+--ffe-color-surface-feedback-critical: #640e10;
+--ffe-color-surface-feedback-tip: #312c44;
+--ffe-color-fill-primary-default: #55709b;
+--ffe-color-fill-primary-default-hover: #748db4;
+--ffe-color-fill-primary-default-pressed: #90a9d0;
+--ffe-color-fill-primary-selected-default: #f7fafd;
+--ffe-color-fill-primary-selected-hover: #d7e7f4;
+--ffe-color-fill-primary-selected-pressed: #c3d9ef;
+--ffe-color-fill-primary-subtle: #2e405c;
+--ffe-color-fill-primary-subtle-hover: #374b6c;
+--ffe-color-fill-primary-subtle-pressed: #3e5579;
+--ffe-color-fill-primary-invisible: #ffffff00;
+--ffe-color-fill-secondary-default: #457aa1;
+--ffe-color-fill-secondary-default-hover: #6096bd;
+--ffe-color-fill-secondary-default-pressed: #7eb5d2;
+--ffe-color-fill-secondary-subtle: #2b5a7c;
+--ffe-color-fill-secondary-subtle-hover: #356488;
+--ffe-color-fill-secondary-subtle-pressed: #3b6f96;
+--ffe-color-fill-tertiary-default: #7b718e;
+--ffe-color-fill-tertiary-default-hover: #a39db9;
+--ffe-color-fill-tertiary-default-pressed: #b4aecb;
+--ffe-color-fill-tertiary-subtle: #4e4a64;
+--ffe-color-fill-tertiary-subtle-hover: #5a5671;
+--ffe-color-fill-tertiary-subtle-pressed: #665d79;
+--ffe-color-fill-neutral-default: #ffffff33;
+--ffe-color-fill-neutral-default-hover: #ffffff40;
+--ffe-color-fill-neutral-default-pressed: #ffffff4d;
+--ffe-color-fill-neutral-subtle: #ffffff13;
+--ffe-color-fill-neutral-subtle-hover: #ffffff1a;
+--ffe-color-fill-neutral-subtle-pressed: #ffffff26;
+--ffe-color-fill-neutral-extra-subtle: #ffffff06;
+--ffe-color-fill-neutral-extra-subtle-hover: #ffffff0d;
+--ffe-color-fill-neutral-extra-subtle-pressed: #ffffff13;
+--ffe-color-fill-feedback-info: #7eb5d2;
+--ffe-color-fill-feedback-info-subtle: #234f71;
+--ffe-color-fill-feedback-success: #6abe97;
+--ffe-color-fill-feedback-success-subtle: #09583b;
+--ffe-color-fill-feedback-warning: #ea910b;
+--ffe-color-fill-feedback-warning-subtle: #682c00;
+--ffe-color-fill-feedback-critical: #ff5e5c;
+--ffe-color-fill-feedback-critical-subtle: #7c1214;
+--ffe-color-fill-feedback-tip: #c1c1dc;
+--ffe-color-fill-feedback-tip-subtle: #45415a;
+--ffe-color-foreground-default: #ffffff;
+--ffe-color-foreground-subtle: #c2c2c2;
+--ffe-color-foreground-emphasis: #d7e7f4;
+--ffe-color-foreground-inverse: #020a0a;
+--ffe-color-foreground-interactive-link: #c3d9ef;
+--ffe-color-foreground-interactive-link-hover: #b6d1ec;
+--ffe-color-foreground-interactive-link-pressed: #9ec2e5;
+--ffe-color-foreground-interactive-link-active: #f7fafd;
+--ffe-color-foreground-feedback-info: #c3dfea;
+--ffe-color-foreground-feedback-success: #b2e6cd;
+--ffe-color-foreground-feedback-warning: #ffc675;
+--ffe-color-foreground-feedback-critical: #ffaea8;
+--ffe-color-foreground-feedback-tip: #d3d3ea;
+--ffe-color-component-form-input-foreground-default: #ffffff;
+--ffe-color-component-form-input-foreground-subtle: #c2c2c2;
+--ffe-color-component-form-input-foreground-placeholder: #adadad;
+--ffe-color-component-form-input-foreground-disabled: #8f8f8f;
+--ffe-color-component-form-input-foreground-read-only: #c2c2c2;
+--ffe-color-component-form-input-foreground-error: #ffaea8;
+--ffe-color-component-form-input-border-active: #d7e7f4;
+--ffe-color-component-form-input-fill-default: #292929;
+--ffe-color-component-form-input-fill-default-hover: #333333;
+--ffe-color-component-form-input-fill-default-pressed: #3d3d3d;
+--ffe-color-component-form-input-fill-disabled: #5c5c5c;
+--ffe-color-component-form-input-fill-read-only: #474747;
+--ffe-color-component-form-input-fill-error: #640e10;
+--ffe-color-component-form-toggleswitch-handle-default: #ffffff;
+--ffe-color-component-form-toggleswitch-fill-default: #7a7a7a;
+--ffe-color-component-form-toggleswitch-fill-default-hover: #8f8f8f;
+--ffe-color-component-form-toggleswitch-fill-default-pressed: #adadad;
+--ffe-color-component-form-toggleswitch-fill-selected: #48a781;
+--ffe-color-component-form-toggleswitch-fill-selected-hover: #6abe97;
+--ffe-color-component-form-toggleswitch-fill-selected-pressed: #8fd1b1;
+--ffe-color-component-form-toggleswitch-fill-critical: #e44244;
+--ffe-color-component-button-action-border-default: #48a781;
+--ffe-color-component-button-action-border-hover: #6abe97;
+--ffe-color-component-button-action-border-pressed: #8fd1b1;
+--ffe-color-component-button-action-fill-default: #00754e;
+--ffe-color-component-button-action-fill-hover: #2a7e5b;
+--ffe-color-component-button-action-fill-pressed: #409674;
+--ffe-color-component-button-action-foreground-default: #ffffff;
+--ffe-color-component-button-action-foreground-hover: #ffffff;
+--ffe-color-component-button-primary-border-default: #9ec2e5;
+--ffe-color-component-button-primary-border-hover: #c3d9ef;
+--ffe-color-component-button-primary-border-pressed: #d7e7f4;
+--ffe-color-component-button-primary-fill-default: #005aa4;
+--ffe-color-component-button-primary-fill-hover: #1566b2;
+--ffe-color-component-button-primary-fill-pressed: #2975c2;
+--ffe-color-component-button-primary-foreground-default: #ffffff;
+--ffe-color-component-button-primary-foreground-hover: #ffffff;
+--ffe-color-component-button-secondary-border-default: #f7fafd;
+--ffe-color-component-button-secondary-border-hover: #f7fafd;
+--ffe-color-component-button-secondary-border-pressed: #f7fafd;
+--ffe-color-component-button-secondary-fill-default: #ffffff00;
+--ffe-color-component-button-secondary-fill-hover: #333333;
+--ffe-color-component-button-secondary-fill-pressed: #3d3d3d;
+--ffe-color-component-button-secondary-foreground-default: #ffffff;
+--ffe-color-component-button-secondary-foreground-hover: #ffffff;
+--ffe-color-component-button-tertiary-fill-default: #ffffff00;
+--ffe-color-component-button-tertiary-fill-hover: #333333;
+--ffe-color-component-button-tertiary-fill-pressed: #3d3d3d;
+--ffe-color-component-button-tertiary-foreground-default: #f7fafd;
+--ffe-color-component-button-tertiary-foreground-hover: #f7fafd;
+--ffe-color-component-logo-name: #ffffff;
+--ffe-color-component-logo-number1: #ffffff;
 --ffe-color-component-logo-circle-dark-red: #af0000;
---ffe-color-component-logo-circle-light-red: #e60000;}
+--ffe-color-component-logo-circle-light-red: #e60000;
+--ffe-color-border-primary-default: #ffffff26;
+--ffe-color-border-primary-default-hover: #ffffff33;
+--ffe-color-border-primary-default-pressed: #ffffff40;
+--ffe-color-border-primary-subtle: #ffffff13;
+--ffe-color-border-primary-subtle-hover: #ffffff1a;
+--ffe-color-border-primary-subtle-pressed: #ffffff26;
+--ffe-color-border-primary-emphasis: #9ec2e5;
+--ffe-color-border-feedback-info: #6096bd;
+--ffe-color-border-feedback-success: #48a781;
+--ffe-color-border-feedback-warning: #cc7205;
+--ffe-color-border-feedback-critical: #e44244;
+--ffe-color-border-feedback-tip: #a39db9;
+--ffe-color-border-interactive-focus: #ea910b;
+--ffe-color-border-interactive-selected: #9ec2e5;
+    }
 }
-:root,
-:host {
---ffe-color-vann-0: #f7fafd;
---ffe-color-vann-25: #e7f1f9;
---ffe-color-vann-50: #d7e7f4;
---ffe-color-vann-75: #cfe2f2;
---ffe-color-vann-100: #c3d9ef;
---ffe-color-vann-150: #b6d1ec;
---ffe-color-vann-200: #9ec2e5;
---ffe-color-vann-250: #8eb8e1;
---ffe-color-vann-300: #7dabd9;
---ffe-color-vann-400: #5494d4;
---ffe-color-vann-500: #2975c2;
---ffe-color-vann-550: #1566b2;
---ffe-color-vann-600: #005aa4;
---ffe-color-vann-650: #084f91;
---ffe-color-vann-700: #073f83;
---ffe-color-vann-800: #002776;
---ffe-color-vann-850: #08235e;
---ffe-color-vann-1000: #070d27;
---ffe-color-frost-25: #e5f0f5;
---ffe-color-frost-50: #dceaef;
---ffe-color-frost-75: #cbe2eb;
---ffe-color-frost-100: #c3dfea;
---ffe-color-frost-150: #b6d7e7;
---ffe-color-frost-200: #a6cee2;
---ffe-color-frost-250: #95c3db;
---ffe-color-frost-300: #7eb5d2;
---ffe-color-frost-350: #6ea6c9;
---ffe-color-frost-450: #5489b0;
---ffe-color-frost-500: #457aa1;
---ffe-color-frost-550: #3b6f96;
---ffe-color-frost-600: #356488;
---ffe-color-frost-650: #2b5a7c;
---ffe-color-frost-700: #234f71;
---ffe-color-frost-800: #163853;
---ffe-color-sand-25: #fcf4ee;
---ffe-color-syrin-25: #eaeaf6;
---ffe-color-syrin-50: #e6e6f4;
---ffe-color-syrin-75: #dcdcef;
---ffe-color-syrin-100: #d3d3ea;
---ffe-color-syrin-150: #cacae3;
---ffe-color-syrin-200: #c1c1dc;
---ffe-color-syrin-250: #bcb8d5;
---ffe-color-syrin-300: #b4aecb;
---ffe-color-syrin-450: #948ba7;
---ffe-color-syrin-500: #817792;
---ffe-color-syrin-550: #6a627f;
---ffe-color-syrin-600: #5a5671;
---ffe-color-syrin-650: #4e4a64;
---ffe-color-syrin-700: #45415a;
---ffe-color-syrin-750: #3c374e;
---ffe-color-syrin-800: #312c44;
---ffe-color-baer-50: #ffd5d1;
---ffe-color-baer-100: #ffaea8;
---ffe-color-baer-200: #ff7f7a;
---ffe-color-baer-300: #ff5e5c;
---ffe-color-baer-400: #e44244;
---ffe-color-baer-500: #c62a2f;
---ffe-color-baer-600: #a01c1f;
---ffe-color-baer-700: #7c1214;
---ffe-color-baer-800: #640e10;
---ffe-color-skog-50: #cbf0df;
---ffe-color-skog-100: #b2e6cd;
---ffe-color-skog-200: #8fd1b1;
---ffe-color-skog-300: #6abe97;
---ffe-color-skog-400: #48a781;
---ffe-color-skog-450: #409674;
---ffe-color-skog-500: #2e8b64;
---ffe-color-skog-550: #2a7e5b;
---ffe-color-skog-600: #00754e;
---ffe-color-skog-650: #0d6346;
---ffe-color-skog-700: #09583b;
---ffe-color-skog-750: #0a4d37;
---ffe-color-skog-800: #0a4330;
---ffe-color-sol-50: #ffe0b2;
---ffe-color-sol-100: #ffc675;
---ffe-color-sol-200: #f6ac3c;
---ffe-color-sol-250: #f49f1f;
---ffe-color-sol-500: #a95704;
---ffe-color-sol-600: #853f00;
---ffe-color-sol-650: #753500;
---ffe-color-sol-700: #682c00;
---ffe-color-sol-750: #582400;
---ffe-color-gray-25: #f0f0f0;
---ffe-color-gray-50: #e5e5e5;
---ffe-color-gray-100: #d6d6d6;
---ffe-color-gray-150: #c2c2c2;
---ffe-color-gray-250: #adadad;
---ffe-color-gray-300: #a4a4a4;
---ffe-color-gray-400: #8f8f8f;
---ffe-color-gray-500: #7a7a7a;
---ffe-color-gray-650: #5c5c5c;
---ffe-color-gray-700: #525252;
---ffe-color-gray-750: #474747;
---ffe-color-gray-800: #3d3d3d;
---ffe-color-gray-900: #292929;
---ffe-color-gray-950: #1f1f1f;
---ffe-color-gray-1000: #141414;
---ffe-color-alpha-white-0: #ffffff00;
---ffe-color-alpha-white-25: #ffffff06;
---ffe-color-alpha-white-50: #ffffff0d;
---ffe-color-alpha-white-75: #ffffff13;
---ffe-color-alpha-white-100: #ffffff1a;
---ffe-color-alpha-white-200: #ffffff33;
---ffe-color-alpha-white-300: #ffffff4d;
---ffe-color-alpha-white-400: #ffffff66;
---ffe-color-alpha-white-500: #ffffff80;
---ffe-color-alpha-white-600: #ffffff99;
---ffe-color-alpha-white-700: #ffffffb2;
---ffe-color-alpha-white-800: #ffffffcc;
---ffe-color-alpha-white-1000: #ffffff;
---ffe-color-alpha-black-25: #020a0a06;
---ffe-color-alpha-black-50: #020a0a0d;
---ffe-color-alpha-black-75: #020a0a13;
---ffe-color-alpha-black-100: #020a0a1a;
---ffe-color-alpha-black-200: #020a0a33;
---ffe-color-alpha-black-300: #020a0a4d;
---ffe-color-alpha-black-400: #020a0a66;
---ffe-color-alpha-black-500: #020a0a80;
---ffe-color-alpha-black-1000: #020a0a;
---ffe-color-alpha-water-100: #005aa41a;
---ffe-color-alpha-water-200: #005aa433;
-}
+/* dark mode accent context */
+@media (prefers-color-scheme: dark) {
+    .regard-color-scheme-preference .ffe-accent-mode {
+    --ffe-color-background-default: #141414;
+--ffe-color-background-subtle: #1f1f1f;
+--ffe-color-surface-primary-default: #292929;
+--ffe-color-surface-primary-default-hover: #333333;
+--ffe-color-surface-primary-default-pressed: #3d3d3d;
+--ffe-color-surface-secondary-default: #0c2232;
+--ffe-color-surface-secondary-default-hover: #102d43;
+--ffe-color-surface-secondary-default-pressed: #163853;
+--ffe-color-surface-tertiary-default: #1d192f;
+--ffe-color-surface-tertiary-default-hover: #27223a;
+--ffe-color-surface-tertiary-default-pressed: #312c44;
+--ffe-color-surface-neutral-default: #3d3d3d;
+--ffe-color-surface-neutral-default-hover: #474747;
+--ffe-color-surface-neutral-default-pressed: #525252;
+--ffe-color-surface-feedback-info: #163853;
+--ffe-color-surface-feedback-success: #0a4330;
+--ffe-color-surface-feedback-warning: #491c00;
+--ffe-color-surface-feedback-critical: #640e10;
+--ffe-color-surface-feedback-tip: #312c44;
+--ffe-color-fill-primary-default: #55709b;
+--ffe-color-fill-primary-default-hover: #748db4;
+--ffe-color-fill-primary-default-pressed: #90a9d0;
+--ffe-color-fill-primary-selected-default: #f7fafd;
+--ffe-color-fill-primary-selected-hover: #d7e7f4;
+--ffe-color-fill-primary-selected-pressed: #c3d9ef;
+--ffe-color-fill-primary-subtle: #374b6c;
+--ffe-color-fill-primary-subtle-hover: #3e5579;
+--ffe-color-fill-primary-subtle-pressed: #47618a;
+--ffe-color-fill-primary-invisible: #ffffff00;
+--ffe-color-fill-secondary-default: #457aa1;
+--ffe-color-fill-secondary-default-hover: #6096bd;
+--ffe-color-fill-secondary-default-pressed: #7eb5d2;
+--ffe-color-fill-secondary-subtle: #2b5a7c;
+--ffe-color-fill-secondary-subtle-hover: #356488;
+--ffe-color-fill-secondary-subtle-pressed: #3b6f96;
+--ffe-color-fill-tertiary-default: #7b718e;
+--ffe-color-fill-tertiary-default-hover: #a39db9;
+--ffe-color-fill-tertiary-default-pressed: #b4aecb;
+--ffe-color-fill-tertiary-subtle: #4e4a64;
+--ffe-color-fill-tertiary-subtle-hover: #5a5671;
+--ffe-color-fill-tertiary-subtle-pressed: #665d79;
+--ffe-color-fill-neutral-default: #ffffff33;
+--ffe-color-fill-neutral-default-hover: #ffffff40;
+--ffe-color-fill-neutral-default-pressed: #ffffff4d;
+--ffe-color-fill-neutral-subtle: #ffffff13;
+--ffe-color-fill-neutral-subtle-hover: #ffffff1a;
+--ffe-color-fill-neutral-subtle-pressed: #ffffff26;
+--ffe-color-fill-neutral-extra-subtle: #ffffff06;
+--ffe-color-fill-neutral-extra-subtle-hover: #ffffff0d;
+--ffe-color-fill-neutral-extra-subtle-pressed: #ffffff13;
+--ffe-color-fill-feedback-info: #7eb5d2;
+--ffe-color-fill-feedback-info-subtle: #234f71;
+--ffe-color-fill-feedback-success: #6abe97;
+--ffe-color-fill-feedback-success-subtle: #09583b;
+--ffe-color-fill-feedback-warning: #ea910b;
+--ffe-color-fill-feedback-warning-subtle: #682c00;
+--ffe-color-fill-feedback-critical: #ff5e5c;
+--ffe-color-fill-feedback-critical-subtle: #7c1214;
+--ffe-color-fill-feedback-tip: #c1c1dc;
+--ffe-color-fill-feedback-tip-subtle: #45415a;
+--ffe-color-foreground-default: #ffffff;
+--ffe-color-foreground-subtle: #c2c2c2;
+--ffe-color-foreground-emphasis: #d7e7f4;
+--ffe-color-foreground-inverse: #020a0a;
+--ffe-color-foreground-interactive-link: #c3d9ef;
+--ffe-color-foreground-interactive-link-hover: #b6d1ec;
+--ffe-color-foreground-interactive-link-pressed: #9ec2e5;
+--ffe-color-foreground-interactive-link-active: #f7fafd;
+--ffe-color-foreground-feedback-info: #c3dfea;
+--ffe-color-foreground-feedback-success: #b2e6cd;
+--ffe-color-foreground-feedback-warning: #ffc675;
+--ffe-color-foreground-feedback-critical: #ffaea8;
+--ffe-color-foreground-feedback-tip: #d3d3ea;
+--ffe-color-component-form-input-foreground-default: #ffffff;
+--ffe-color-component-form-input-foreground-subtle: #c2c2c2;
+--ffe-color-component-form-input-foreground-placeholder: #adadad;
+--ffe-color-component-form-input-foreground-disabled: #8f8f8f;
+--ffe-color-component-form-input-foreground-read-only: #c2c2c2;
+--ffe-color-component-form-input-foreground-error: #ffaea8;
+--ffe-color-component-form-input-border-active: #d7e7f4;
+--ffe-color-component-form-input-fill-default: #292929;
+--ffe-color-component-form-input-fill-default-hover: #333333;
+--ffe-color-component-form-input-fill-default-pressed: #3d3d3d;
+--ffe-color-component-form-input-fill-disabled: #5c5c5c;
+--ffe-color-component-form-input-fill-read-only: #474747;
+--ffe-color-component-form-input-fill-error: #640e10;
+--ffe-color-component-form-toggleswitch-handle-default: #ffffff;
+--ffe-color-component-form-toggleswitch-fill-default: #7a7a7a;
+--ffe-color-component-form-toggleswitch-fill-default-hover: #8f8f8f;
+--ffe-color-component-form-toggleswitch-fill-default-pressed: #adadad;
+--ffe-color-component-form-toggleswitch-fill-selected: #48a781;
+--ffe-color-component-form-toggleswitch-fill-selected-hover: #6abe97;
+--ffe-color-component-form-toggleswitch-fill-selected-pressed: #8fd1b1;
+--ffe-color-component-form-toggleswitch-fill-critical: #e44244;
+--ffe-color-component-button-action-border-default: #48a781;
+--ffe-color-component-button-action-border-hover: #6abe97;
+--ffe-color-component-button-action-border-pressed: #8fd1b1;
+--ffe-color-component-button-action-fill-default: #00754e;
+--ffe-color-component-button-action-fill-hover: #2a7e5b;
+--ffe-color-component-button-action-fill-pressed: #409674;
+--ffe-color-component-button-action-foreground-default: #ffffff;
+--ffe-color-component-button-action-foreground-hover: #ffffff;
+--ffe-color-component-button-primary-border-default: #9ec2e5;
+--ffe-color-component-button-primary-border-hover: #c3d9ef;
+--ffe-color-component-button-primary-border-pressed: #d7e7f4;
+--ffe-color-component-button-primary-fill-default: #005aa4;
+--ffe-color-component-button-primary-fill-hover: #1566b2;
+--ffe-color-component-button-primary-fill-pressed: #2975c2;
+--ffe-color-component-button-primary-foreground-default: #ffffff;
+--ffe-color-component-button-primary-foreground-hover: #ffffff;
+--ffe-color-component-button-secondary-border-default: #f7fafd;
+--ffe-color-component-button-secondary-border-hover: #f7fafd;
+--ffe-color-component-button-secondary-border-pressed: #f7fafd;
+--ffe-color-component-button-secondary-fill-default: #ffffff00;
+--ffe-color-component-button-secondary-fill-hover: #333333;
+--ffe-color-component-button-secondary-fill-pressed: #3d3d3d;
+--ffe-color-component-button-secondary-foreground-default: #ffffff;
+--ffe-color-component-button-secondary-foreground-hover: #ffffff;
+--ffe-color-component-button-tertiary-fill-default: #ffffff00;
+--ffe-color-component-button-tertiary-fill-hover: #333333;
+--ffe-color-component-button-tertiary-fill-pressed: #3d3d3d;
+--ffe-color-component-button-tertiary-foreground-default: #f7fafd;
+--ffe-color-component-button-tertiary-foreground-hover: #f7fafd;
+--ffe-color-component-logo-name: #ffffff;
+--ffe-color-component-logo-number1: #ffffff;
+--ffe-color-component-logo-circle-dark-red: #af0000;
+--ffe-color-component-logo-circle-light-red: #e60000;
+--ffe-color-border-primary-default: #ffffff26;
+--ffe-color-border-primary-default-hover: #ffffff33;
+--ffe-color-border-primary-default-pressed: #ffffff40;
+--ffe-color-border-primary-subtle: #ffffff13;
+--ffe-color-border-primary-subtle-hover: #ffffff1a;
+--ffe-color-border-primary-subtle-pressed: #ffffff26;
+--ffe-color-border-primary-emphasis: #9ec2e5;
+--ffe-color-border-feedback-info: #6096bd;
+--ffe-color-border-feedback-success: #48a781;
+--ffe-color-border-feedback-warning: #cc7205;
+--ffe-color-border-feedback-critical: #e44244;
+--ffe-color-border-feedback-tip: #a39db9;
+--ffe-color-border-interactive-focus: #f49f1f;
+--ffe-color-border-interactive-selected: #9ec2e5;
+    }
+}