/* ==========================================================================
   DESIGN SYSTEM — single entry point.

   Once real pages exist, link only this one file:
     <link rel="stylesheet" href="{{ url_for('static', filename='css/design-system.css') }}">

   Order matters: tokens first, then reset, then typography, then
   components (which consume the tokens above but never redefine them).
   ========================================================================== */
@import "base/tokens.css";
@import "base/reset.css";
@import "base/typography.css";

@import "components/buttons.css";
@import "components/cards.css";
@import "components/product-card.css";
@import "components/forms.css";
@import "components/navbar.css";
@import "components/footer.css";
@import "components/sidebar.css";
@import "components/badges.css";
@import "components/dropdown.css";
@import "components/search-overlay.css";
@import "components/modal.css";
@import "components/drawer.css";
@import "components/toast.css";
@import "components/skeleton.css";
@import "components/pagination.css";
@import "components/breadcrumb.css";
@import "components/carousel.css";

/* Layout container used by every component above */
.container{ width: min(1280px, 92vw); margin-inline: auto; }