/* ==========================================================================
   MASTER-UI-ENGINE — Engine
   Single entry point for every preview. Link this one file, then override any
   custom property to re-theme the library:

     <link rel="stylesheet" href="../design-tokens/engine.css">

   Layer order: primitives -> semantics -> scales -> motion -> light -> dark -> base.
   Nothing here styles headings, links or paragraphs, so linking the engine
   never restyles a consuming page's markup.

   For ready-made components, also link ../styles/components.css after this file.
   ========================================================================== */

@import "./colors/primitive.css";
@import "./colors/semantic.css";
@import "./typography/scale.css";
@import "./spacing/scale.css";
@import "./borders/scale.css";
@import "./shadows/scale.css";
@import "./motion/scale.css";
@import "./themes/light.css";
@import "./themes/dark.css";
@import "./themes/presets.css";

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Tells native widgets (select menus, date pickers, scrollbars, form controls)
   which palette to render in, so nothing stays light inside a dark preview. */
:root {
  color-scheme: light;
}
html.dark {
  color-scheme: dark;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: hsl(var(--color-gray-900));
  background: hsl(var(--color-gray-50));
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  transition: background-color var(--duration-base) var(--ease-standard),
    color var(--duration-base) var(--ease-standard);
}

::selection {
  background: hsla(var(--color-primary-500) / 0.22);
}

[hidden] {
  display: none !important;
}

/* Set by styles/mue.js while a modal is open. */
html.mue-locked {
  overflow: hidden;
}

/* One focus ring for the whole library. A preview that styles its own controls
   still wins, because its <style> block is authored after this link. */
:focus-visible {
  outline: 2px solid hsl(var(--color-primary-500));
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}