/*
 * @front-porch-solutions/design-system — main entry
 *
 * Imports everything: tokens (primitives + semantics), reset, and
 * every component CSS. For most apps, importing this single file
 * is enough:
 *
 *   @import '@front-porch-solutions/design-system';
 *
 * For finer control, import only what you need:
 *
 *   @import '@front-porch-solutions/design-system/tokens';
 *   @import '@front-porch-solutions/design-system/reset';
 *   @import '@front-porch-solutions/design-system/components/button';
 *
 * Layer order is declared here. Each imported file self-wraps its
 * content in its named layer (@layer fps.tokens.primitives { ... }),
 * so imports below deliberately omit the `layer(...)` clause — adding
 * it would nest the layer inside itself (fps.tokens.primitives
 * .fps.tokens.primitives) and silently break the cascade.
 *
 * If you mix FPS CSS with other stylesheets, declare the FPS cascade
 * layer order FIRST in your app's global CSS, before any @imports:
 *
 *   @layer fps.tokens.primitives, fps.tokens.semantics, fps.reset, fps.components;
 */

@layer fps.tokens.primitives, fps.tokens.semantics, fps.reset, fps.components;

@import './tokens/primitives.css';
@import './tokens/semantics.css';
@import './reset.css';
@import './components/button.css';
@import './components/fab.css';
@import './components/card.css';
@import './components/badge.css';
@import './components/input.css';
@import './components/modal.css';
@import './components/toast.css';
@import './components/table.css';
@import './components/navigation.css';
@import './components/misc.css';