:root {
    /* Background Colors */
    --background: var(--white);
    --background-active: var(--ec-color-active-gray-50);
    --background-hover: var(--ec-color-hover-gray-50);
    --background-selected: var(--ec-color-gray-50);
    --background-selected-hover: var(--ec-color-hover-gray-50);
    --background-brand: var( --ec-color-green-60);
    --background-inverse: var(--ec-color-gray-80);
    --background-inverse-hover: var(--ec-color-gray-110);
    --background-notification-error: var(--ec-color-red-10);
    /* Layers */
    --layer-01: var(--ec-color-gray-10);
    --layer-02: var(--white);
    --layer-03: var(--ec-color-gray-10);
    --layer-hover-01: var(--ec-color-hover-gray-10);
    --layer-hover-02: var(--ec-color-hover-gray-10);
    --layer-hover-03: var(--ec-color-hover-gray-10);
    --layer-active-01: var(--ec-color-gray-30);
    --layer-active-02: var(--ec-color-gray-30);
    --layer-active-03: var(--ec-color-gray-30);
    --layer-selected-01: var(--ec-color-gray-20);
    --layer-selected-02: var(--ec-color-gray-20);
    --layer-selected-03: var(--ec-color-gray-20);
    --layer-selected-hover-01: var(--ec-color-gray-120);
    --layer-selected-hover-02: var(--ec-color-gray-120);
    --layer-selected-hover-03: var(--ec-color-gray-120);
    --layer-selected-disabled: var(--ec-color-gray-50);
    --layer-selected-inverse: var(--ec-color-gray-100);
    /* Layer accent token */
    --layer-accent-01: var(--ec-color-gray-20);
    --layer-accent-02: var(--ec-color-gray-20);
    --layer-accent-03: var(--ec-color-gray-20);
    --layer-accent-hover-01: var(--ec-color-gray-120);
    --layer-accent-hover-02: var(--ec-color-gray-120);
    --layer-accent-hover-03: var(--ec-color-gray-120);
    --layer-accent-active-01: var(--ec-color-gray-40);
    --layer-accent-active-02: var(--ec-color-gray-40);
    --layer-accent-active-03: var(--ec-color-gray-40);
    /* Field token */
    --field-01: var(--ec-color-gray-10);
    --field-02: var(--white);
    --field-03: var(--ec-color-gray-10);
    --field-hover-01: var(--ec-color-hover-gray-10);
    --field-hover-02: var(--ec-color-hover-gray-10);
    --field-hover-03: var(--ec-color-hover-gray-10);
    /* Border token */
    --border-subtle-00: var(--ec-color-gray-20);
    --border-subtle-01: var(--ec-color-gray-30);
    --border-subtle-02: var(--ec-color-gray-20);
    --border-subtle-03: var(--ec-color-gray-30);
    --border-subtle-selected-01: var(--ec-color-gray-30);
    --border-subtle-selected-02: var(--ec-color-gray-30);
    --border-subtle-selected-03: var(--ec-color-gray-30);
    --border-subtle-selected-04: var(--black);
    --border-strong-01: var(--ec-color-gray-50);
    --border-strong-02: var(--ec-color-gray-50);
    --border-strong-03: var(--ec-color-gray-50);
    --border-inverse: var(--ec-color-gray-100);
    --border-interactive: var(--ec-color-gray-50);
    --border-disabled: var(--ec-color-gray-30);
    --border-tile-01: var(--ec-color-gray-30);
    --border-tile-02: var(--ec-color-gray-40);
    --border-tile-03: var(--ec-color-gray-30);
    /* Text tokens */
    --text-primary: var(--ec-color-gray-100);
    --text-secondary: var(--ec-color-gray-70);
    --text-placeholder: var(--ec-color-gray-40);
    --text-on-color: var(--white);
    --text-helper: var(--ec-color-gray-60);
    --text-error: var(--ec-color-red-50);
    --text-inverse: var(--white);
    --text-disabled: var(--ec-color-gray-100);
    --text-on-color-disabled: var(--ec-color-gray-50);
    --text-primary-on-disabled: var(--ec-color-gray-100-opacity-25);
    --text-primary-on-dark-disabled: var(--ec-color-gray-100-opacity-65);
    /* Link Tokens */
    --link-primary: var(--ec-color-blue-60);
    --link-primary-hover: var(--ec-color-hover-blue-70);
    --link-secondary: var(--ec-color-blue-60);
    --link-inverse: var(--ec-color-blue-40);
    --link-visited: var( --ec-color-purple-60);
    /* Icon Tokens */
    --icon-primary: var(--ec-color-gray-100);
    --icon-secondary: var(--ec-color-gray-70);
    --icon-on-color: var(--black);
    --icon-inverse: var(--white);
    --icon-on-color-disabled: var(--ec-color-gray-50);
    --icon-disabled: var(--ec-color-gray-100);
    --icon-interactive: var( --ec-color-green-60);
    /* Support token */
    --support-error: var(--ec-color-red-60);
    --support-success: var(--ec-color-success-blue-50);
    --support-warning: var(--ec-color-yellow-30);
    --support-info: var(--ec-color-blue-70);
    --notification-info-background: var(--ec-color-blue-10);
    --notification-info-border: var(--ec-color-blue-70-opacity-30);
    --notification-error-border: var(--ec-color-red-60-opacity-30);
    --support-success-inverse: var(--ec-color-success-blue-40);
    --support-warning-inverse: var(--ec-color-yellow-30);
    --support-info-inverse: var(--ec-color-blue-50);
    --support-caution-major: var(--ec-color-orange-40);
    --support-caution-minor: var(--ec-color-yellow-30);
    --support-undefined: var( --ec-color-purple-60);
    /* Focus Tokens */
    --focus-primary: var(--ec-color-green-60);
    --focus-secondary: var(--ec-color-blue-60);
    --focus-inset: var(--white);
    --focus-inverse: var(--white);
    /* Miscellaneous Tokens */
    --interactive-primary: var( --ec-color-green-60);
    --interactive-secondary: var(--ec-color-blue-60);
    --interactive-primary-selected: var(--ec-color-green-60);
    --highlight: var(--ec-color-green-20);
    --overlay: var(--ec-color-gray-100);
    --skeleton-background: var(--ec-color-hover-gray-110);
    --skeleton-element: var(--ec-color-gray-30);
    --toggle-off: var(--ec-color-gray-50);
    /* Button Tokens */
    --button-primary: var(--ec-color-green-60);
    --button-primary-hover: var(--ec-color-hover-green-50);
    --button-primary-active: var(--ec-color-green-80);
    --button-secondary: var(--ec-color-gray-80);
    --button-secondary-hover: var(--ec-color-hover-gray-80);
    --button-secondary-active: var(--ec-color-gray-60);
    --button-tertiary: var(--ec-color-green-60);
    --button-tertiary-hover: var(--ec-color-hover-green-50);
    --button-tertiary-active: var(--ec-color-green-80);
    --button-danger-primary: var(--ec-color-red-50);
    --button-danger-secondary: var(--ec-color-red-50);
    --button-danger-ghost: var(--ec-color-red-60);
    --button-danger-hover: var(--ec-color-hover-red-10);
    --button-danger-primary-hover: var(--ec-color-red-75);
    --button-danger-active: var(--ec-color-red-50);
    --button-danger-primary-active: var(--ec-color-red-80);
    --button-separator: var(--ec-color-gray-20);
    --button-disabled: var(--ec-color-gray-30);
    /* Tag colors Tokens */
    --tag-background-blue: var(--ec-color-blue-20);
    --tag-color-blue: var(--ec-color-blue-70);
    --tag-hover-blue: var(--ec-color-hover-blue-10);
    --tag-background-cyan: var(--ec-color-cyan-20);
    --tag-color-cyan: var(--ec-color-cyan-70);
    --tag-hover-cyan: var(--ec-color-hover-cyan-10);
    --tag-background-green: var(--ec-color-green-20);
    --tag-color-green: var(--ec-color-green-70);
    --tag-hover-green: var(--ec-color-hover-green-110);
    --tag-background-orange: var(--ec-color-orange-110);
    --tag-color-orange: var(--ec-color-orange-120);
    --tag-hover-orange: var(--ec-color-hover-orange-10);
    --tag-background-magenta: var(--ec-color-magenta-20);
    --tag-color-magenta: var(--ec-color-magenta-70);
    --tag-hover-magenta: var(--ec-color-hover-magenta-10);
    --tag-background-purple: var( --ec-color-purple-20);
    --tag-color-purple: var( --ec-color-purple-70);
    --tag-hover-purple: var(--ec-color-hover-purple-10);
    --tag-background-red: var(--ec-color-red-20);
    --tag-color-red: var(--ec-color-red-70);
    --tag-hover-red: var(--ec-color-hover-red-20);
    --tag-background-teal: var(--ec-color-teal-20);
    --tag-color-teal: var(--ec-color-teal-70);
    --tag-hover-teal: var(--ec-color-hover-teal-10);
    --tag-background-gray: var(--ec-color-gray-20);
    --tag-background-black: var(--ec-color-gray-90);
    --tag-color-gray: var(--ec-color-gray-100);
    --tag-hover-gray: var(--ec-color-hover-gray-20);
    --tag-background-cool-gray: var(--ec-color-cool-gray-20);
    --tag-color-cool-gray: var(--ec-color-cool-gray-100);
    --tag-hover-cool-gray: var(--ec-color-cool-gray-110);
    --tag-background-warm-gray: var(--ec-color-warm-gray-20);
    --tag-color-warm-gray: var(--ec-color-warm-gray-100);
    --tag-hover-warm-gray: var(--ec-color-hover-gray-120);
    /* Filters */
    --ec-theme-filter-white: brightness(0) invert(1);
    --ec-theme-filter-black: brightness(0) invert(0);
    --ec-theme-filter-primary: brightness(0) saturate(100%) invert(29%) sepia(93%) saturate(4780%) hue-rotate(105deg) brightness(93%) contrast(98%);
    /* Feeback: Error Roles */
    --ec-theme-error-surface: unset;
}