@use 'theme/base';
@use 'theme/dark';
@use 'theme/light';
@use 'theme/utils';
@use 'shape';
@use 'type';

html {
  @include base.palette;
  @include shape.space;
  @include shape.radius;
  @include type.font-size;
  @include type.line-height;
  @include type.letter-spacing;
}

[data-color-scheme='dark'],
html:not([data-color-scheme]) {
  color-scheme: dark;

  @include dark.tokens;
  @include utils.invert-on-dark;

  &[data-contrast='high'],
  [data-contrast='high'] & {
    @include dark.contrast-overrides;
  }
}

[data-color-scheme='light'] {
  color-scheme: light;

  @include light.tokens;
  @include utils.invert-on-light;

  &[data-contrast='high'],
  [data-contrast='high'] & {
    @include light.contrast-overrides;
  }
}
