/* ============================================================ MEL DESIGN SYSTEM — styles.css Single entry point. Consumers link THIS one file: Nectar with the Mel theme: fonts, the "Honey & Slate" theme (and its alternate skins) and the framework, in the same cascade layers as a `mel init` project — reset, theme, classless, elements, components, layout, utilities. The Mel app patterns live in the framework file of their layer (app shell in layout.css, pills and type in elements.css, cards/chat/terminal… in components.css). Theme is selected with — one of: (default light) · dark · glass · glass-dark · brutal · corp · premium. ============================================================ */ @layer reset, theme, classless, elements, components, layout, utilities; /* ---------- Fonts ---------- */ @import url('fonts.css'); /* ---------- Reset ---------- */ @import url('framework/reset.css') layer(reset); /* ---------- Default theme : Honey & Slate (light) + skins ---------- */ @import url('framework/theme-mel.css'); @import url('framework/theme-mel-dark.css'); @import url('framework/theme-mel-glass.css'); @import url('framework/theme-mel-glass-dark.css'); @import url('framework/theme-mel-brutal.css'); @import url('framework/theme-mel-corp.css'); @import url('framework/theme-mel-premium.css'); /* ---------- Framework ---------- */ @import url('framework/classless.css') layer(classless); @import url('framework/elements.css') layer(elements); @import url('framework/components.css') layer(components); @import url('framework/layout.css') layer(layout); @import url('framework/utilities.css') layer(utilities);