/* @heyharmony/design-tokens — surface scopes, dark mode */
.dark [data-surface="0"] {
  --harmony-fg: oklch(0.923 0 0);
  --harmony-fg-secondary: oklch(0.715 0 0);
  --harmony-fg-tertiary: oklch(0.6 0 0);
  --harmony-fg-disabled: oklch(0.48 0 0);
  --harmony-input-bg: oklch(0.28 0 0);
  --harmony-input-border: oklch(0.341 0 0);
  --harmony-input-border-hover: oklch(0.399 0 0);
  --harmony-input-border-focus: oklch(0.454 0 0);
  --harmony-input-border-error: oklch(0.562 0.1966 26.3);
  --harmony-input-border-active: oklch(0.437 0 0);
  --harmony-input-border-highlight: oklch(0.418 0 0);
  --harmony-input-bg-active: oklch(0.311 0 0);
  --harmony-input-bg-highlight: oklch(0.301 0 0);
  --harmony-input-bg-disabled: oklch(0.216 0 0);
  --harmony-input-placeholder: oklch(0.581 0 0);
  --harmony-tab-bg: oklch(0.301 0 0);
  --harmony-tab-bg-hover: oklch(0.341 0 0);
  --harmony-tab-outline: oklch(0.399 0 0);
  --harmony-border-subtle: oklch(0.321 0 0);
  --harmony-border-default: oklch(0.371 0 0);
  --cta-bg: oklch(0.985 0 0);
  --cta-fg: oklch(0.145 0 0);
  --cta-bg-hover: oklch(0.9 0 0);
  --cta-bg-active: oklch(0.82 0 0);
  --cta-border: oklch(0.985 0 0);
}
.dark [data-surface="1"] {
  --harmony-fg: oklch(0.923 0 0);
  --harmony-fg-secondary: oklch(0.715 0 0);
  --harmony-fg-tertiary: oklch(0.6 0 0);
  --harmony-fg-disabled: oklch(0.48 0 0);
  --harmony-input-bg: oklch(0.301 0 0);
  --harmony-input-border: oklch(0.361 0 0);
  --harmony-input-border-hover: oklch(0.418 0 0);
  --harmony-input-border-focus: oklch(0.473 0 0);
  --harmony-input-border-error: oklch(0.562 0.1966 26.3);
  --harmony-input-border-active: oklch(0.456 0 0);
  --harmony-input-border-highlight: oklch(0.437 0 0);
  --harmony-input-bg-active: oklch(0.331 0 0);
  --harmony-input-bg-highlight: oklch(0.321 0 0);
  --harmony-input-bg-disabled: oklch(0.238 0 0);
  --harmony-input-placeholder: oklch(0.581 0 0);
  --harmony-tab-bg: oklch(0.321 0 0);
  --harmony-tab-bg-hover: oklch(0.361 0 0);
  --harmony-tab-outline: oklch(0.409 0 0);
  --harmony-border-subtle: oklch(0.341 0 0);
  --harmony-border-default: oklch(0.39 0 0);
  --cta-bg: oklch(0.95 0 0);
  --cta-fg: oklch(0.145 0 0);
  --cta-bg-hover: oklch(0.87 0 0);
  --cta-bg-active: oklch(0.79 0 0);
  --cta-border: oklch(0.95 0 0);
}
.dark [data-surface="2"] {
  --harmony-fg: oklch(0.923 0 0);
  --harmony-fg-secondary: oklch(0.715 0 0);
  --harmony-fg-tertiary: oklch(0.6 0 0);
  --harmony-fg-disabled: oklch(0.48 0 0);
  --harmony-input-bg: oklch(0.341 0 0);
  --harmony-input-border: oklch(0.399 0 0);
  --harmony-input-border-hover: oklch(0.456 0 0);
  --harmony-input-border-focus: oklch(0.511 0 0);
  --harmony-input-border-error: oklch(0.562 0.1966 26.3);
  --harmony-input-border-active: oklch(0.492 0 0);
  --harmony-input-border-highlight: oklch(0.474 0 0);
  --harmony-input-bg-active: oklch(0.371 0 0);
  --harmony-input-bg-highlight: oklch(0.361 0 0);
  --harmony-input-bg-disabled: oklch(0.28 0 0);
  --harmony-input-placeholder: oklch(0.581 0 0);
  --harmony-tab-bg: oklch(0.361 0 0);
  --harmony-tab-bg-hover: oklch(0.399 0 0);
  --harmony-tab-outline: oklch(0.418 0 0);
  --harmony-border-subtle: oklch(0.38 0 0);
  --harmony-border-default: oklch(0.418 0 0);
  --cta-bg: oklch(0.91 0 0);
  --cta-fg: oklch(0.145 0 0);
  --cta-bg-hover: oklch(0.83 0 0);
  --cta-bg-active: oklch(0.75 0 0);
  --cta-border: oklch(0.91 0 0);
}
.dark [data-surface="3"] {
  --harmony-fg: oklch(0.923 0 0);
  --harmony-fg-secondary: oklch(0.715 0 0);
  --harmony-fg-tertiary: oklch(0.6 0 0);
  --harmony-fg-disabled: oklch(0.48 0 0);
  --harmony-input-bg: oklch(0.321 0 0);
  --harmony-input-border: oklch(0.38 0 0);
  --harmony-input-border-hover: oklch(0.437 0 0);
  --harmony-input-border-focus: oklch(0.492 0 0);
  --harmony-input-border-error: oklch(0.562 0.1966 26.3);
  --harmony-input-border-active: oklch(0.474 0 0);
  --harmony-input-border-highlight: oklch(0.456 0 0);
  --harmony-input-bg-active: oklch(0.351 0 0);
  --harmony-input-bg-highlight: oklch(0.341 0 0);
  --harmony-input-bg-disabled: oklch(0.259 0 0);
  --harmony-input-placeholder: oklch(0.581 0 0);
  --harmony-tab-bg: oklch(0.341 0 0);
  --harmony-tab-bg-hover: oklch(0.38 0 0);
  --harmony-tab-outline: oklch(0.399 0 0);
  --harmony-border-subtle: oklch(0.361 0 0);
  --harmony-border-default: oklch(0.399 0 0);
  --cta-bg: oklch(0.87 0 0);
  --cta-fg: oklch(0.145 0 0);
  --cta-bg-hover: oklch(0.79 0 0);
  --cta-bg-active: oklch(0.71 0 0);
  --cta-border: oklch(0.87 0 0);
}
.dark [data-surface="4"] {
  --harmony-fg: oklch(0.923 0 0);
  --harmony-fg-secondary: oklch(0.715 0 0);
  --harmony-fg-tertiary: oklch(0.6 0 0);
  --harmony-fg-disabled: oklch(0.48 0 0);
  --harmony-input-bg: oklch(0.361 0 0);
  --harmony-input-border: oklch(0.418 0 0);
  --harmony-input-border-hover: oklch(0.474 0 0);
  --harmony-input-border-focus: oklch(0.529 0 0);
  --harmony-input-border-error: oklch(0.562 0.1966 26.3);
  --harmony-input-border-active: oklch(0.51 0 0);
  --harmony-input-border-highlight: oklch(0.492 0 0);
  --harmony-input-bg-active: oklch(0.39 0 0);
  --harmony-input-bg-highlight: oklch(0.38 0 0);
  --harmony-input-bg-disabled: oklch(0.301 0 0);
  --harmony-input-placeholder: oklch(0.581 0 0);
  --harmony-tab-bg: oklch(0.38 0 0);
  --harmony-tab-bg-hover: oklch(0.418 0 0);
  --harmony-tab-outline: oklch(0.437 0 0);
  --harmony-border-subtle: oklch(0.399 0 0);
  --harmony-border-default: oklch(0.437 0 0);
  --cta-bg: oklch(0.83 0 0);
  --cta-fg: oklch(0.145 0 0);
  --cta-bg-hover: oklch(0.75 0 0);
  --cta-bg-active: oklch(0.67 0 0);
  --cta-border: oklch(0.83 0 0);
}