/* ──────────────────────────────────────────────────────────────────────────── KIT STYLESHEET ENTRY ──────────────────────────────────────────────────────────────────────────── `pnpm build:css` compiles this file to dist/styles.css. That output is self-contained: consumers import it and need no Tailwind setup of their own. Apps that already run Tailwind v4 can skip it and import the token layers instead — see README → "Consuming". ──────────────────────────────────────────────────────────────────────────── */ @import 'tailwindcss'; @import 'tw-animate-css'; @import './tokens.css'; @import './theme.css'; /* Tell Tailwind where the class names live. Without this the CLI would rely on automatic detection from the working directory, which changes depending on who invokes the build. */ @source '../**/*.{ts,tsx}'; /* Stories and tests are not shipped, but their class names would be: Tailwind scans text, so a utility mentioned only in a demo or an assertion still ends up as a real rule in dist/styles.css. Excluding them keeps the published stylesheet to what the components actually render. */ @source not '../**/*.stories.{ts,tsx}'; @source not '../**/*.test.{ts,tsx}'; /* Dark mode is class-driven (``), not media-driven, so the consuming app stays in control of the toggle. */ @custom-variant dark (&:is(.dark *)); @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; font-family: var(--ui-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Respect the OS-level motion preference across every animated component in the kit, rather than leaving it to each one. */ @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; } } }