/**
 * Al-Mizan Design System — main.css
 *
 * The only file that declares layer order. Everything else joins a layer.
 *
 * Cascade layers replace BEM as the specificity mechanism. Under BEM, precedence is a
 * convention: it holds while everyone writes selectors of the same shape and fails
 * silently when someone does not. pages.css is 2,700 lines of that convention. Under
 * layers, precedence is declared here and selector shape stops deciding it — a rule in
 * `components` cannot out-specify one in `utilities` however it is written.
 *
 * Class names are untouched. This changes how the cascade is governed, not what
 * anything is called.
 *
 * The legacy sheets join `components` in their original link order, so which rule wins
 * among them is unchanged. They leave that layer a surface at a time as each is ported.
 *
 * Every import carries the same ?v= as the <link> in base.html and they are bumped
 * together. Without it the browser revalidates main.css and keeps every sheet it
 * imports from cache, so a change to a component sheet ships and no reader sees it —
 * which is a failure with no symptom other than the old design persisting.
 *
 * Trade-off, stated rather than discovered: @import serialises. Six parallel <link>
 * requests become a short chain. Every file is served from the same origin as the page
 * and most deployments are local, so the cost is small — but it is a cost, and the way
 * out is bundling at build time, not more <link> tags, which cannot carry a layer.
 */

@layer reset, tokens, base, components, surfaces, utilities;

@import url('tokens.css?v=6') layer(tokens);
@import url('base.css?v=6') layer(base);

/* Original link order preserved within the layer. */
@import url('effects.css?v=6') layer(components);
@import url('components.css?v=6') layer(components);
@import url('style.css?v=6') layer(components);
@import url('pages.css?v=6') layer(components);

/* Ported surfaces sit in their own layer above the legacy sheets. They were first
   written into `components` alongside them, and every rule lost: landing.css states
   each rule inside :where(), which contributes zero specificity, so a bare legacy
   `a` or `pre` selector beat it and the surface rendered in the old palette. Layer
   order, not selector shape, is what should decide that — which is only true if the
   ported surface is in a later layer than what it replaces. */
@import url('surfaces.css?v=6') layer(surfaces);
@import url('chrome.css?v=6') layer(surfaces);
@import url('controls.css?v=6') layer(surfaces);
@import url('components/landing.css?v=6') layer(surfaces);
@import url('components/quickstart.css?v=6') layer(surfaces);
@import url('components/engine.css?v=6') layer(surfaces);
@import url('components/playground.css?v=6') layer(surfaces);
@import url('components/majlis.css?v=6') layer(surfaces);
@import url('components/graph.css?v=6') layer(surfaces);
@import url('components/reference.css?v=6') layer(surfaces);
@import url('components/strategy.css?v=6') layer(surfaces);

@import url('a11y.css?v=6') layer(utilities);