/* ==========================================================================
   NOFONT DESIGN SYSTEM — FOUNDATION
   --------------------------------------------------------------------------
   The structural half of the system: tokens, reset, base defaults,
   unstyled components, the motion layer and the layout utilities. No
   visual styling. A brand or visual layer (for example nofont-theme.css)
   loads after this file and only overrides tokens and element defaults.

   Link this one file and the browser pulls in the rest:

     <link rel="stylesheet" href="/path/to/nofont-design-system/css/foundation.css">

   Or import it from your own stylesheet, before your own rules:

     @import url("../nofont-design-system/css/foundation.css");

   Order matters and is fixed here:
     1. tokens       layer nofont.tokens (custom properties on :root)
     2. reset        layer nofont.reset
     3. base         layer nofont.base
     4. components   layer nofont.components (c- classes)
     5. animation    unlayered (a- classes)
     6. utilities    unlayered, single-class specificity (u- classes)
     7. deprecated   aliases for old names, drop when migrated

   The @layer line declares the layer order before any layer is used, so
   project CSS (layered or not) always beats reset, base and components,
   while animation and utilities keep the footing utilities have always
   had. Components and motion also need their scripts:

     <script src="/path/to/nofont-design-system/js/components.js" defer></script>
     <script src="/path/to/nofont-design-system/js/motion.js" defer></script>

   Import only what you use if you prefer: every file below stands alone.
   ========================================================================== */

@layer nofont.tokens, nofont.reset, nofont.base, nofont.components;

@import url("tokens.css");
@import url("reset.css");
@import url("base.css");

@import url("components/layout.css");
@import url("components/content-grid.css");
@import url("components/zigzag.css");
@import url("components/button.css");
@import url("components/badge.css");
@import url("components/date-tile.css");
@import url("components/list.css");
@import url("components/media-object.css");
@import url("components/swatches.css");
@import url("components/logos.css");
@import url("components/notice.css");
@import url("components/facts.css");
@import url("components/log.css");
@import url("components/form.css");
@import url("components/table.css");
@import url("components/dialog.css");
@import url("components/disclosure.css");
/* split-button builds on c-button and c-dropdown, so it follows both. */
@import url("components/split-button.css");
@import url("components/tabs.css");
@import url("components/tooltip.css");
@import url("components/media.css");
@import url("components/figure.css");
@import url("components/overlap.css");
@import url("components/scroll-strip.css");
@import url("components/filter.css");
@import url("components/scene.css");
@import url("components/mock.css");
@import url("components/social.css");
@import url("components/media-grid.css");

@import url("animation/motion.css");

/* Containers before gap: u-flexRow and u-grid reset --gap to 0 so a nested
   container does not inherit its parent's gutter, and u-gap-N has to come
   after them to win at the same specificity. */
@import url("utilities/flex.css");
@import url("utilities/size.css");
@import url("utilities/grid.css");
@import url("utilities/gap.css");
@import url("utilities/spacing.css");
@import url("utilities/bleed.css");
@import url("utilities/visibility.css");
@import url("utilities/text.css");
@import url("utilities/misc.css");

@import url("deprecated.css");