@import "../props.media.css";

:where(html) {
  color-scheme: light;

  --link: var(--indigo-7);
  --link-visited: var(--purple-7);

  --text-1: var(--gray-12);
  --text-2: var(--gray-7);

  --surface-1: var(--gray-0);
  --surface-2: var(--gray-2);
  --surface-3: var(--gray-3);
  --surface-4: var(--gray-4);

  --scrollthumb-color: var(--gray-7);

  @media (--HDcolor) {
    @supports (color: color(display-p3 0 0 0)) {
      --link: color(display-p3 .1 .39 1);
      --link-visited: color(display-p3 .6 .2 1);
    }
  }

  & :where(dialog) {
    background-color: var(--surface-1);
  }

  & :where(button,.btn) {
    --_highlight: var(--_highlight-light);
    --_bg: var(--_bg-light);
    --_ink-shadow: var(--_ink-shadow-light);

    & :where([type="reset"]) {
      --_text: var(--red-6);
      --_border: var(--red-3);
    }
  }

  & :where(button,.btn,input:is([type="button"],[type="submit"],[type="reset"]))[disabled] {
    --_text: var(--gray-6);
  }

  & :where(textarea, select, input:not([type="button"],[type="submit"],[type="reset"])) {
    background-color: var(--surface-2);
  }
}