/* main.css – Manifest des gemeinsamen Design-Systems (Default-Stylesheet, auf
   JEDER Seite via <link rel="stylesheet" href="/css/main.css"> geladen).

   Das Design-System ist in verantwortungsbezogene Teil-Stylesheets aufgeteilt
   und wird hier per @import gebündelt. Die @import-Reihenfolge entspricht der
   Kaskade des früheren Monolithen (Tokens/Basis zuerst, Effekte zuletzt) –
   dadurch bleibt das Verhalten unverändert. So bleibt ein einziger <link> je
   Seite bestehen (kein Build, kein Mount), während jede Teildatei unter den
   Dateigrössen-Richtwerten bleibt.

   Feature-spezifische Styles liegen daneben in eigenen Dateien und werden
   zusätzlich geladen:
     • public/features/<feature>/<feature>.css   (pro Feature)
     • public/components/<name>.css               (Komponenten)
     • public/css/home.css                        (Startseite)

   Design-System adaptiert von rewert.ch (Light-Theme).
   Farben: Schwarz/Weiss + Akzent-Grün #61FF93. Helvetica, scharfe Ecken.

   === CSS Cascade Layers ===
   Die Kaskade ist über @layer quellordnungs-unabhängig gemacht: innerhalb der
   unten deklarierten Reihenfolge gewinnt der HÖHERE Layer – unabhängig von
   Selektor-Spezifität und <link>-Reihenfolge. Das entschärft die
   many-<link>-Fragilität (Seiten laden bis zu sieben Feature-/Component-CSS
   nebeneinander): Absicht (Base < Layout < Components < Features < Utilities)
   statt Zufall der Einbinde-Reihenfolge entscheidet. Begründung in DESIGN.md
   »Cascade Layers«.

   Die Reihenfolge wird EINMAL hier – im ersten <link> jeder Seite, noch vor
   allen @imports – deklariert und gilt damit dokumentweit, auch für die später
   per <link> eingehängten Component-/Feature-Stylesheets (die sich selbst in
   @layer components{…} bzw. @layer features{…} hüllen). Ein bare
   @layer-Statement darf laut Spec vor @import stehen.

   Zuordnung der Bundle-Dateien:
     • base.css       – gliedert sich selbst in @layer reset{} + @layer base{}
     • layout.css     → layout
     • components/blocks/tables.css → components
     • responsive.css – gliedert sich selbst in @layer layout{} + components{}
     • utilities.css  – gliedert sich selbst: echte Utilities → utilities,
                        Component-Muster (.btn-ghost, .filter-row …) → components
     • effects.css    – BEWUSST unlayered: setzt nur nicht-kollidierende
                        Eigenschaften (Entrance-Animation, Fokusring) und den
                        reduced-motion-!important-Override, der über allem
                        Normalen gewinnen soll. */

@layer reset, base, layout, components, features, utilities;

@import url('/css/base.css'); /* @layer reset + base: Schrift, Tokens, Reset, Icons, Typografie */
@import url('/css/layout.css') layer(layout); /* Header, Env-Badge, App-Shell, Main, Card */
@import url('/css/components.css') layer(components); /* Formulare, Buttons, Listen, Breadcrumb, Footer, Badges */
@import url('/css/blocks.css') layer(components); /* Komposit-Blöcke: Tabs, KPI-Kacheln, Seiten-Toolbar */
@import url('/css/tables.css') layer(components); /* Gemeinsame Daten-Tabelle (.rw-table) */
@import url('/css/responsive.css'); /* @layer layout + components: Mobile-Media-Queries */
@import url('/css/utilities.css'); /* @layer utilities + components: Utilities & Component-Muster */
@import url('/css/effects.css'); /* unlayered: Entrance-Fades, Fokus, Reduced-Motion */