/* ============================================================
 * master.css — single entry point for all TWL CSS
 *
 * Every TWL HTML page loads this file (and only this file) for
 * its CSS. The cascade layers are declared first so that the
 * order of @import below DOES NOT control specificity — the
 * @layer rule does.
 *
 * Why cascade layers (per PERSONALITY.md "Code quality discipline"
 * + INCIDENT_LEARNINGS Active rule #6): explicit layer order means
 * page-level overrides win without `!important`. Utility classes
 * win over component classes. Components win over layout. Layout
 * wins over base. No specificity wars.
 *
 * Convention:
 *   tokens     — CSS custom property declarations only
 *   reset      — modern, accessibility-aware reset
 *   base       — typography, links, body baseline
 *   sidebar    — sidebar component (separate file because it's big)
 *   forms      — form element styling (separate file because it's big)
 *   layout     — layout primitives (.app-shell .page-grid .card ...)
 *   components — interactive components (.btn .chip .modal .alert ...)
 *   pages      — page-scoped sections (.page-dashboard ...)
 *   utilities  — atomic helpers (.text-center .mt-3 .stack ...) -
 *                topmost layer so utilities win at the markup site
 *
 * Unlayered CSS (i.e., page-inline <style> blocks) wins over any
 * layered CSS per the spec. This means truly emergency-only
 * page-inline rules still win — but the discipline is that
 * inline <style> blocks should be empty for routine work.
 *
 * Authored 2026-05-29 as part of the post-incident refactor.
 * ============================================================ */

@layer reset, tokens, base, sidebar, forms, layout, components, themes, pages, utilities;

@import url("/css/tokens.css")     layer(tokens);
@import url("/css/reset.css")      layer(reset);
@import url("/css/base.css")       layer(base);
@import url("/sidebar.css")        layer(sidebar);
@import url("/forms.css")          layer(forms);
@import url("/css/layout.css")     layer(layout);
@import url("/css/components.css") layer(components);
@import url("/css/themes.css")     layer(themes);
@import url("/css/pages.css")      layer(pages);
@import url("/css/utilities.css")  layer(utilities);