/* ============================================================================
   WebPros Design System — global entry point.
   Consumers link this one file. It is an @import manifest only; every token,
   webfont, and component-primitive stylesheet is reached from here.
   ========================================================================== */

/* Webfonts first (browsers drop a remote @import that follows other rules) */
@import url("tokens/fonts.css");

/* Token layer */
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/motion.css");

/* Component primitives (class-based; mirrors the React components) */
@import url("ui.css");
@import url("ui-ext.css");

/* ---- Base layer --------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}
::selection { background: oklch(0.585 0.186 292 / 0.22); }
h1, h2, h3, h4, h5 { font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--foreground); }
a { color: inherit; text-decoration: none; }
svg { display: block; }
[hidden] { display: none !important; }