/* Afara design system — single stylesheet entry.
 *
 *   <link rel="stylesheet" href="styles/afara.css">
 *
 * Loads tokens, both themes, and every style layer in a fixed cascade order. No build step is required.
 * For production, `npm run build:dist` concatenates this graph into dist/afara.css.
 *
 * Cascade layers (lowest → highest priority). A later layer always wins over an earlier one regardless of
 * selector specificity, so product code never needs !important or specificity hacks to override the system:
 *   afara-reset      browser normalisation
 *   afara-base       element defaults, fonts, focus, motion
 *   afara-type       text styles
 *   afara-layout     containers, grids, stacks, application shell
 *   afara-components primitive + composite components
 *   afara-patterns   infrastructure components and page patterns
 *   afara-utilities  single-purpose helpers
 * Unlayered product CSS beats every layer above.
 */
@layer afara-reset, afara-base, afara-type, afara-layout, afara-components, afara-patterns, afara-utilities;

@import url("../tokens/tokens.css");
@import url("../tokens/themes/light.css");
@import url("../tokens/themes/dark.css");

@import url("reset.css") layer(afara-reset);
@import url("foundations.css") layer(afara-base);
@import url("typography.css") layer(afara-type);
@import url("layout.css") layer(afara-layout);
@import url("responsive.css") layer(afara-layout);

@import url("components.css");
@import url("patterns.css");
@import url("utilities.css") layer(afara-utilities);