/*
 * mondo.css - framework component umbrella stylesheet.
 *
 * Single <link> entry-point for the app projects to consume framework component
 * styles. Imports each mondo-<type>.css into the `mondo` cascade layer, in
 * hierarchical order - outermost (app shell) first, innermost (input) last -
 * so cascade order mirrors component containment.
 *
 * File layout (under wwwroot/css/):
 *   theme/        ← design tokens + rotating palette
 *     mondo-tokens.css   - brand (--bm-*) + semantic (--mondo-*) tokens
 *     mondo-palette.css  - 8-colour rotating palette (--mondo-color-blue, …)
 *   components/   ← per-component-family stylesheets
 *     mondo-<type>.css   - one file per component layer, hierarchical order
 *
 * Brand tokens (--bm-*) + semantic tokens (--mondo-*) live in theme/.
 * Components reference --mondo-* only - never --bm-* directly - so re-pointing
 * semantic tokens (app overrides, workspace overrides, dark mode) lands
 * everywhere a component reads the value.
 *
 * Component-hierarchy ordering (matches the tree:
 *   App > Workspace > Block > Page > View > Panel > List | Form > Field > Input)
 *
 * Note: `@import url(...) layer(name);` is the spec-correct syntax for layered
 * imports. Wrapping `@import` inside an `@layer name { ... }` block does NOT
 * work - `@import` rules must appear at the top of the stylesheet.
 */

/* ── Theme: tokens + palette (must come first) ──────────────────────────── */
@import url('theme/mondo-tokens.css')                  layer(mondo);
@import url('theme/mondo-palette.css')                 layer(mondo);

/* ── Global FluentUI defaults (applied to every <fluent-*> host) ────────── */
@import url('components/mondo-fluent-overrides.css')   layer(mondo);
@import url('components/mondo-explainer.css')          layer(mondo);
@import url('components/mondo-empty-state.css')         layer(mondo);
@import url('components/mondo-loading.css')             layer(mondo);
@import url('components/mondo-code-block.css')          layer(mondo);

/* ── Brand logo image (blockmondo-brand-logo.svg in wwwroot) ────────────── */
@import url('components/mondo-brand.css')              layer(mondo);

/* ── App / Workspace / Block - top-of-tree shell layers ─────────────────── */
@import url('components/mondo-app.css')                layer(mondo);
@import url('components/mondo-app-tile.css')           layer(mondo);
@import url('components/mondo-app-launcher-strip.css') layer(mondo);
@import url('components/mondo-app-logo.css')           layer(mondo);
@import url('components/mondo-host-logo.css')          layer(mondo);
@import url('components/mondo-app-roster.css')         layer(mondo);
@import url('components/mondo-identity.css')           layer(mondo);
/* @import url('components/mondo-workspace.css')      layer(mondo); */
/* @import url('components/mondo-block.css')          layer(mondo); */

/* ── Page / View / Panel - page composition layers ──────────────────────── */
@import url('components/mondo-page.css')               layer(mondo);
@import url('components/mondo-view.css')               layer(mondo);
@import url('components/mondo-article.css')            layer(mondo);
@import url('components/mondo-site.css')               layer(mondo);
@import url('components/mondo-panel.css')              layer(mondo);

/* ── Inside-Panel content layers ────────────────────────────────────────── */
@import url('components/mondo-list.css')               layer(mondo);
@import url('components/mondo-form.css')               layer(mondo);
/* @import url('components/mondo-field.css')          layer(mondo); */
@import url('components/mondo-input.css')              layer(mondo);
@import url('components/mondo-picker.css')             layer(mondo);
@import url('components/mondo-chart.css')              layer(mondo);
@import url('components/mondo-card.css')               layer(mondo);
@import url('components/mondo-drilldown-card.css')      layer(mondo);
@import url('components/mondo-component-card.css')      layer(mondo);
@import url('components/mondo-subcomponent-card.css')   layer(mondo);
@import url('components/mondo-stepper.css')            layer(mondo);
@import url('components/mondo-tour.css')               layer(mondo);
@import url('components/mondo-atom.css')               layer(mondo);
@import url('components/mondo-band.css')               layer(mondo);
@import url('components/mondo-banner.css')             layer(mondo);
@import url('components/mondo-board.css')              layer(mondo);
@import url('components/mondo-menu.css')               layer(mondo);
@import url('components/mondo-strip.css')              layer(mondo);
@import url('components/mondo-surface.css')            layer(mondo);
@import url('components/mondo-your-activity.css')      layer(mondo);
@import url('components/mondo-ask-mondo.css')          layer(mondo);
@import url('components/mondo-help.css')               layer(mondo);
@import url('components/mondo-learn.css')              layer(mondo);
@import url('components/mondo-credits.css')            layer(mondo);
@import url('components/mondo-shell.css')              layer(mondo);
@import url('components/mondo-budget-pivot.css')       layer(mondo);
/* (Primitives - value objects - have NO CSS; they're pure data.) */

/* ── Accessibility baselines (must come last - settles over every component) ─ */
@import url('components/mondo-a11y.css')               layer(mondo);