/* ITStats — Spacestation OS architecture entry point.

   Cascade layer order (lowest to highest priority for NORMAL declarations):
     legacy < reset < tokens < base < layout < components < utilities

   Component rules in components/*.css are scoped to
   :where([data-theme^="spacestation"]) so the legacy theme
   (data-theme="legacy") falls back through the cascade to the
   wrapped legacy styles.css for original chrome shapes.

   --- CASCADE GOTCHAS (Phase 4 lessons, full notes in .claude/CLAUDE.md) ---

   1. !IMPORTANT REVERSES LAYER ORDER. @layer legacy !important is the
      HIGHEST !important priority bucket; @layer components !important
      cannot override it. To beat a legacy !important, either remove
      the cargo-cult !important from legacy OR put your override INSIDE
      @layer legacy with higher specificity + later source order.

   2. `background: var(--token)` SHORTHAND can fail to set background-color
      when var() can't be type-resolved at parse time. Use explicit
      `background-color: var(--token)` and add `background-image: none
      !important` if a legacy gradient needs clearing.

   3. ONE #ID (specificity 0,1,0,0) BEATS TWO CLASSES (0,0,2,0). Adding
      `[data-theme^='spacestation']` alone won't beat `#x .y` rules from
      inline <style>; prefix with the same #x.

   4. WIDTH/HEIGHT CAPS in components/*.css must enumerate legacy
      width-variant siblings (.modal-large, .wizard-modal, .import-modal
      etc) — see modal.css for the pattern. The Phase 2 generic
      `.modal-overlay > .modal { max-width: 600px }` silently squeezed
      every legacy modal that opted out of the BEM rename. */

@layer legacy, reset, tokens, base, layout, components, utilities;

/* === Reset === */
@import url('./base/reset.css') layer(reset);

/* === Tokens === */
@import url('./tokens/palette.css') layer(tokens);
@import url('./tokens/themes.css') layer(tokens);
@import url('./tokens/typography.css') layer(tokens);
@import url('./tokens/spacing.css') layer(tokens);
@import url('./tokens/motion.css') layer(tokens);
@import url('./tokens/shadows.css') layer(tokens);
@import url('./tokens/charts.css') layer(tokens);

/* === Base === */
@import url('./base/root.css') layer(base);
@import url('./base/typography.css') layer(base);

/* === Layout === */
@import url('./layout/porthole.css') layer(layout);
@import url('./layout/grid.css') layer(layout);
@import url('./layout/stack.css') layer(layout);

/* === Components === */
@import url('./components/form-layout.css') layer(components);
@import url('./components/form-fields.css') layer(components);
@import url('./components/form-choice.css') layer(components);
@import url('./components/form-upload.css') layer(components);
@import url('./components/pagination.css') layer(components);
@import url('./components/wizard.css') layer(components);
@import url('./components/chip.css') layer(components);
@import url('./components/card.css') layer(components);
@import url('./components/progress.css') layer(components);
@import url('./components/table.css') layer(components);
@import url('./components/button.css') layer(components);
@import url('./components/pill.css') layer(components);
@import url('./components/modal.css') layer(components);
@import url('./components/toast.css') layer(components);
@import url('./components/nav.css') layer(components);
@import url('./components/topbar.css') layer(components);
@import url('./components/view-header.css') layer(components);
@import url('./components/view-tickets.css') layer(components);
@import url('./components/view-tasks.css') layer(components);
@import url('./components/view-inventory.css') layer(components);
@import url('./components/view-projects.css') layer(components);
@import url('./components/view-notifications.css') layer(components);
@import url('./components/view-vault.css') layer(components);
@import url('./components/view-login.css') layer(components);
@import url('./components/view-submit.css') layer(components);
@import url('./components/view-statistics.css') layer(components);
@import url('./components/view-access.css') layer(components);
@import url('./components/status-bar.css') layer(components);
@import url('./components/tabs.css') layer(components);
@import url('./components/tooltip.css') layer(components);
@import url('./components/spinner.css') layer(components);
@import url('./components/theme-toggle.css') layer(components);
@import url('./components/impersonation-bar.css') layer(components);

/* === Utilities === */
@import url('./utilities/helpers.css') layer(utilities);