/* ============================================================================
 * main.css — The only stylesheet pages link to
 * ----------------------------------------------------------------------------
 * Establishes the CSS cascade layer order ONCE, then imports each layer in
 * its proper position. Pages reference this file and nothing else.
 *
 * Layer order (declared FIRST, before any @import, so priority is fixed):
 *   tokens     → design primitives (colors, sizes, motion curves)
 *   base       → reset, @font-face, body defaults, a11y
 *   components → reusable component styles (populated in Phase 2.1+)
 *   utilities  → single-purpose helper classes (last, highest precedence)
 *
 * Anything outside a layer beats everything inside. That's intentional —
 * it gives page-level overrides an explicit escape hatch without !important.
 * ========================================================================= */

@layer tokens, base, components, utilities;

@import url('./tokens.css')     layer(tokens);
@import url('./base.css')       layer(base);
@import url('./components.css') layer(components);
@import url('./_toast.css')     layer(components);
@import url('./_onboarding_polish.css') layer(components);
/* utilities.css arrives in Phase 2.3 (Governance) */