/*
 * grundwerk-ui entry stylesheet.
 *
 * Declares the cascade layer order once, then imports each layer's file
 * into its layer with `@import url(...) layer(<name>);`. This is the
 * chosen approach over the alternative (each layer file wrapping its own
 * contents in `@layer <name> { ... }`) because:
 *
 *   - the layer order lives in exactly one place (the statement below),
 *     instead of being implied by import order and re-stated in every file;
 *   - the individual layer files stay plain CSS with no extra nesting,
 *     which keeps diffs small and lets tooling (stylelint, the token
 *     audit test) parse them without unwrapping a layer block first;
 *   - `layers/components/_index.css` can `@import` each component file
 *     WITHOUT its own `layer()` — an unlayered `@import` nested inside a
 *     layered one is assigned to the enclosing layer, so every component
 *     file it lists lands in the `components` layer automatically. See
 *     that file's header comment and docs/css-architecture.md.
 *
 * Layer order (lowest to highest priority — a rule in `utilities` beats
 * an equally specific rule in `reset`, regardless of source order):
 *
 *   reset      browser default removal only, no tokens, no colours
 *   tokens     custom properties only, no selectors beyond :root
 *   base       bare element defaults (body, a, table, form controls, …)
 *   layout     app shell, page container, stack/cluster/grid primitives
 *   components cotton component styles, one file per component
 *   utilities  small set of single-purpose helper classes
 */
@layer reset, tokens, base, layout, components, utilities;

@import url("layers/reset.css") layer(reset);
@import url("layers/tokens.css") layer(tokens);
@import url("layers/base.css") layer(base);
@import url("layers/layout.css") layer(layout);
@import url("layers/components/_index.css") layer(components);
@import url("layers/utilities.css") layer(utilities);