/* ==========================================================================
   TAKT UI Kit · Stylesheet entry point
   --------------------------------------------------------------------------
   Link this file plus the page stylesheet on every page:

     <link rel="stylesheet" href="../assets/css/takt.css">
     <link rel="stylesheet" href="../assets/css/pages/d02-product.css">

   Order matters: tokens → base → layout/typography → components.
   Page files (css/pages/*.css) come last and only style their own page.
   ========================================================================== */

@import url("fonts.css");
@import url("tokens.css");
@import url("base.css");
@import url("layout.css");
@import url("typography.css");

/* shared UI components */
@import url("components/button.css");
@import url("components/segmented.css");
@import url("components/photo.css");
@import url("components/annotation.css");
@import url("components/toast.css");
@import url("components/signal-mark.css");
@import url("components/machine-state.css");
@import url("components/stack-light.css");
@import url("components/form.css");
@import url("components/chip.css");
@import url("components/switch.css");
@import url("components/dialog.css");
@import url("components/cta-band.css");
@import url("components/contact-card.css");
@import url("components/breadcrumb.css");
@import url("components/tabs.css");

/* site chrome (rendered by assets/js/components/*.js) */
@import url("components/site-header.css");
@import url("components/site-footer.css");
@import url("components/kit-sidebar.css");
@import url("components/kit-pill.css");