/*
 * Single stylesheet entry point — establishes cascade layer order.
 *
 * Layer order (later layers win, no !important needed):
 *   base — tokens, component styles, main styles.css
 *   skin — glassmorphism + welcome-icon skin; wins over base by layer
 *          order alone, so new skin rules must NOT use !important
 *   late — animation utilities & selection components that must
 *          override skin (reduced-motion guards, .animation-* classes)
 *
 * Import order within a layer still matters (later import wins ties).
 * !important REVERSES layer priority: a base !important beats a skin
 * !important. Keep base !important limited to guards that must never
 * be reskinned (.hidden, pointer-events, scrollbar hiding).
 */
@layer base, skin, late;

@import url('base/variables.css') layer(base);
@import url('themes.css') layer(base);
@import url('components/tabs.css') layer(base);
@import url('components/inputs.css') layer(base);
@import url('components/modals.css') layer(base);
@import url('components/gm-blocks.css') layer(base);
@import url('components/roll-overlay.css') layer(base);
@import url('../styles.css') layer(base);
@import url('dice-3d.css') layer(base);
@import url('dice-roller.css') layer(base);
@import url('utilities/layout.css') layer(base);
@import url('components/demo-flow.css') layer(base);
@import url('components/book-layout.css') layer(base);
@import url('components/tome-cover.css') layer(base);
@import url('components/title-particles.css') layer(base);

@import url('welcome-icon-overrides.css') layer(skin);
@import url('glassmorphism-overrides.css') layer(skin);

@import url('utilities/animations.css') layer(late);
@import url('components/selections.css') layer(late);