/* ============================================
   Main CSS File - Import all modules
   Order matters: Base → Layout → Components → Pages
   ============================================ */

/* 1. Base Layer: Design tokens and reset */
@import url('base/variables.css');
@import url('base/reset.css');

/* 2. Layout Layer: Page containers and grid systems */
@import url('layout/containers.css');
@import url('layout/grid-systems.css');

/* 3. Component Layer: Reusable UI elements */
@import url('components/buttons.css');
@import url('components/cards.css');
@import url('components/snow-effect.css');
@import url('components/filters.css');
@import url('components/multiselect.css');
@import url('components/navigation.css');
@import url('components/animations.css');
@import url('components/toggles.css');
@import url('components/loading.css');
@import url('components/breadcrumbs.css');
@import url('components/difficulty.css');
@import url('components/tabs.css');
@import url('components/modals.css');
@import url('components/hero.css');
@import url('components/testimonials.css');
@import url('components/stats.css');
@import url('components/gooey-button.css');
@import url('components/features.css');
@import url('components/footer.css');


/* 4. Page Layer: Page-specific styles */
@import url('pages/home.css');
@import url('pages/questions-by-topic.css');
@import url('pages/past-papers.css');
@import url('pages/viewer.css');
@import url('pages/tutorials.css');

/* ============================================
   Dark Mode (color2) Image Inversion
   ============================================ */
[data-theme="color2"] #img-wrap img,
[data-theme="color2"] .card-grid img {
   filter: invert(1);
}