:where(html) {
  --font-stack-normal: 'Niveau Grotesk', 'Open Sans', 'Helvetica Neue Light', 'Helvetica Neue',
    'Helvetica', 'Arial', sans-serif;
  --color-error-text: var(--functional-color-error-0);
}

:where(html) {
  --fitx-color-text: var(--brand-color-anthracite-0);

  --fitx-label-color: var(--brand-color-gray-carbon);
  --fitx-label-color-activated: var(--fitx-label-color);
  --fitx-label-color-disabled: var(--brand-color-gray-cement);
  --fitx-label-color-error: var(--color-error-text);

  font-family: var(--font-stack-normal);
  color: var(--fitx-color-text);
}

/* :where([data-theme='dark'], [data-theme='touchpoint-dark']) { */
:where([data-theme*='dark']) {
  --fitx-label-color: var(--brand-color-gray-stone);
  --fitx-label-color-activated: var(--brand-color-gray-cement);
}

:where(html) {
  /* --fitx-color-text: var(--primary-brand-color-white); */

  --fitx-button-color: var(--primary-brand-color-white);
  --fitx-button-color-background: var(--primary-brand-color-orange);
  --fitx-button-color-background-hover: var(--brand-color-orange-1);
  --fitx-button-color-disabled: var(--brand-color-gray-cement);
  --fitx-button-color-background-disabled: var(--brand-color-gray-chalk);

  --fitx-button-color-secondary: var(--brand-color-anthracite-0);
  --fitx-button-color-background-secondary: transparent;
  --fitx-button-color-background-hover-secondary: var(--brand-color-gray-chalk);
  --fitx-button-color-disabled-secondary: var(--brand-color-gray-cement);
  --fitx-button-color-background-disabled-secondary: transparent;
  --fitx-button-color-border-secondary: var(--brand-color-anthracite-0);

  --fitx-button-color-tertiary: var(--brand-color-anthracite-0);
  --fitx-button-color-background-tertiary: var(--brand-color-white-0);
  --fitx-button-color-background-hover-tertiary: var(--brand-color-gray-chalk);
  --fitx-button-color-disabled-tertiary: var(--brand-color-gray-cement);
  --fitx-button-color-background-disabled-tertiary: var(--brand-color-white-0);
  --fitx-button-color-border-tertiary: var(--brand-color-gray-ash);
}

:where([data-theme*='dark']) {
  --fitx-color-text: var(--primary-brand-color-white);
  --fitx-button-color-background-disabled: var(--brand-color-anthracite-3);

  --fitx-button-color-secondary: var(--brand-color-white-0);

  --fitx-button-color-background-hover-secondary: var(--brand-color-anthracite-3);
  --fitx-button-color-border-secondary: var(--brand-color-white-0);

  --fitx-button-color-tertiary: var(--brand-color-white-0);
  --fitx-button-color-background-tertiary: transparent;
  --fitx-button-color-background-hover-tertiary: var(--brand-color-anthracite-3);
  --fitx-button-color-background-disabled-tertiary: transparent;

  .btn--secondary:is([disabled], .btn--disabled) {
    --fitx-button-color-border-secondary: var(--brand-color-anthracite-3);
  }

  --fitx-link-color-secondary: var(--brand-color-white-0);
  --fitx-link-color-secondary-hover: var(--brand-color-white-2);

  --maintenance-color-bg: var(--brand-color-anthracite-0);
}

[data-theme*='dark'] {
  color-scheme: dark;
  /* Input Styles */
  --label-color: var(--brand-color-gray-stone);
  --fitx-input-color: var(--brand-color-white-0);
  --fitx-input-color-background: transparent;
  --fitx-input-color-border: var(--brand-color-gray-graphite);

  --fitx-input-color-hover: var(--brand-color-white-0);
  --fitx-input-color-border-hover: var(--brand-color-gray-stone);

  --fitx-input-color-disabled: var(--brand-color-gray-cement);
  --fitx-input-color-background-disabled: var(--brand-color-anthracite-3);
  --fitx-input-color-border-disabled: var(--brand-color-gray-graphite);

  --fitx-input-color-border-focused: var(--brand-color-gray-stone);

  --fitx-input-color-border-error: var(--functional-color-error-0);
  --fitx-input-color-error: var(--fitx-input-color);
  --fitx-label-color-error: var(--functional-color-error-0); /* @TODO nur label? */
  --fitx-input-color-background-error: var(--functional-color-error-1-dark);
  --fitx-input-color-additional: var(--brand-color-gray-graphite);

  --fitx-table-color: var(--primary-brand-color-white);
  --fitx-table-color-row-hover: var(--brand-color-anthracite-3);
  --fitx-table-color-row-border: var(--brand-color-gray-carbon);
  --fitx-table-color-sort-inactive: var(--brand-color-gray-cement);
  --fitx-table-color-sort-active: var(--primary-brand-color-white);

  --fitx-select-color-additional: var(--brand-color-gray-graphite);

  .auto-suggest {
    --auto-suggest-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
    --auto-suggest-list-color-background: var(--brand-color-anthracite-4);
    --auto-suggest-list-border: 1px solid var(--brand-color-anthracite-3);
    --auto-suggest-scrollbar-track: var(--brand-color-anthracite-1);
  }
}