/**
 * Casoon UI Design System - Core CSS
 * 
 * Dieses Stylesheet definiert die Layer-Struktur und importiert
 * alle benötigten CSS-Module.
 */

/* 
 * Definition der globalen Layer-Reihenfolge
 * Sorgt für konsistente Spezifität über alle Komponenten hinweg
 */
@layer reset,        /* CSS-Reset und Normalisierung */
       tokens,       /* Design-Tokens und Variablen */
       themes,       /* Theme-System */
       themes-base,  /* Basis-Theme-Definitionen */
       themes-mode,  /* Light/Dark-Theme-Definitionen */
       themes-custom, /* Benutzerdefinierte Themes */
       base,         /* Grundlegende Elementstile */
       logical-properties, /* Logische Eigenschaften für RTL/LTR Support */
       accessibility, /* Barrierefreiheits-bezogene Stile */
       colors,       /* Farbdefinitionen und Schema */
       color-mix,    /* Farb-Mischungen und -Transformationen */
       typography,   /* Typografie-System */
       typography-headings, /* Überschriften-Stile */
       typography-weights, /* Schriftgewichte */
       typography-baseline, /* Baseline-Grid */
       typography-base, /* Basis-Typografie */
       typography-text, /* Text-Element-Stile */
       typography-responsive, /* Responsive Typografie */
       typography-fluid, /* Fluid Typografie */
       layout,       /* Layout-System */
       layout-grid,  /* Grid-System */
       layout-flex,  /* Flex-Layouts */
       layout-containers, /* Container-System */
       layout-spacing, /* Abstandsregeln */
       layout-responsive, /* Responsive Layouts */
       layout-utilities, /* Layout-Utilities */
       utilities,    /* Hilfsstilklassen */
       utilities-variables, /* Variablen für Utilities */
       utilities-mixins, /* Mixins für Utilities */
       utilities-helpers, /* Hilfsklassen */
       utilities-customize, /* Anpassungen */
       components,   /* Komponentenstile */
       form,         /* Formular-bezogene Stile */
       animations,   /* Animationsdefinitionen */
       animation-contexts, /* Kontextbezogene Animationen */
       effects,      /* Visuelle Effekte */
       smooth-scroll, /* Scrolling-Verhalten und -Effekte */
       icons;        /* Icon-System */


/*
 * Import der Layer-Definitionen
 * Importreihenfolge entspricht der Layer-Hierarchie
 */

/* =================== GRUNDLEGENDE LAYER =================== */
@import url("core/reset.css"); /* layer(reset) */
@import url("tokens/index.css"); /* layer(tokens) */
@import url("themes/index.css"); /* layer(themes) und vereinfachte Theme-Layer */

/* =================== BASISSTILE & PROPERTIES =================== */
@import url("core/logical-properties.css"); /* layer(logical-properties) */
@import url("core/accessibility/index.css"); /* layer(accessibility) */
@import url("core/colors.css"); /* layer(colors) */
@import url("core/color-mix.css"); /* layer(color-mix) */
@import url("core/smooth-scroll.css"); /* layer(smooth-scroll) */

/* =================== UTILITY & STYLING LAYER =================== */
@import url("utilities/index.css"); /* layer(utilities) und utilities-* Layer */
@import url("typography/index.css"); /* layer(typography) und typography-* Layer */
@import url("layout/index.css"); /* layer(layout) und layout-* Layer */

/* Schriftarten aus dem neuen Pfad importieren */
@import url("fonts/fonts.css"); /* Basis-Schriften-Definitionen */

/* =================== KOMPONENTEN & ICONS =================== */
@import url("icons/index.css"); /* layer(icons) */
@import url("ui/index.css"); /* UI-System mit Regionen, Komponenten und Formularen */

/* =================== EFFECTS & UI COMPONENTS =================== */

/* 
 * Effects und UI-Components/Patterns werden nicht automatisch importiert.
 * Diese müssen vom Verwender einzeln nach dem Laden der Haupt-CSS importiert werden, z.B.:
 * 
 * @import url("pfad/zur/ui-lib/effects/animation.css");
 * @import url("pfad/zur/ui-lib/ui/components/button.css");
 * @import url("pfad/zur/ui-lib/ui/patterns/card.css");
 */