/* Default light theme */
:root {
  @apply lightTheme;
}

/* User override: explicit dark mode via class */
:root.is-dark {
  @apply darkTheme;
}

/* User contrast overrides (highest priority) */
/* User explicitly wants high contrast */
:root.is-moreContrast.is-dark {
  @apply darkTheme-highcontrast;
}

:root.is-moreContrast:not(.is-dark) {
  @apply lightTheme-highcontrast;
}

/* User explicitly wants normal contrast (overrides OS high contrast) */
:root.is-normalContrast.is-dark {
  @apply darkTheme;
}

:root.is-normalContrast:not(.is-dark) {
  @apply lightTheme;
}

/* OS-level dark mode (unless overridden by data-theme light) */
@media screen and (prefers-color-scheme: dark) and (forced-colors: none) {
  :root:not(.is-dark):not([data-theme*='"appearance":"light"']) {
    @apply darkTheme;
  }
}

/* OS-level high contrast (only applies when user hasn't set contrast preference) */
@media screen and (prefers-contrast: more) and (forced-colors: none) {
  /* Light theme + OS high contrast (no user contrast override) */
  :root:not(.is-dark):not(.is-moreContrast):not(.is-normalContrast) {
    @apply lightTheme-highcontrast;
  }

  /* Dark theme via class + OS high contrast (no user contrast override) */
  :root.is-dark:not(.is-moreContrast):not(.is-normalContrast) {
    @apply darkTheme-highcontrast;
  }

  /* OS dark mode + OS high contrast (no user overrides) */
  @media screen and (prefers-color-scheme: dark) {
    :root:not(.is-dark):not(.is-moreContrast):not(.is-normalContrast):not(
        [data-theme*='"appearance":"light"']
      ) {
      @apply darkTheme-highcontrast;
    }
  }
}

/* High contrast borders - applies when high contrast is actually being used */
*,
:after,
:before {
  @apply more-contrast:border-gray-400 more-contrast:![--button-outline-color:theme(colors.gray.400)];
}
