/**
 * Main CSS File - Aprender21 2025
 * 
 * This file imports all CSS in the correct order using CSS @layer
 * for proper cascade control and performance optimization
 * 
 * CSS Layers Priority (lowest to highest):
 * 1. reset - Browser normalization
 * 2. tokens - Design system variables
 * 3. elements - Base HTML element styles
 * 4. layout - Layout patterns and containers
 * 5. components - Reusable UI components
 * 6. utilities - Single-purpose helper classes
 * 7. pages - Page-specific styles
 * 
 * Usage: <link rel="stylesheet" href="/css/main.css">
 */

/* ========== LAYER DECLARATIONS ========== */
/* Declare layers in order of specificity (low to high) */

@layer reset, tokens, elements, layout, components, utilities, pages;

/* ========== LAYER: RESET ========== */
/* Browser normalization and modern reset */

@import url('2-generic/reset.css') layer(reset);

/* ========== LAYER: TOKENS ========== */
/* Design system variables and tokens */

@import url('tokens.css') layer(tokens);
@import url('0-settings/tokens-2025.css') layer(tokens);

/* ========== LAYER: ELEMENTS ========== */
/* Base HTML element styles */

@import url('3-elements/typography.css') layer(elements);

/* ========== LAYER: LAYOUT ========== */
/* Layout systems and structural patterns */

@import url('layout.css') layer(layout);
@import url('4-layout/container.css') layer(layout);
@import url('4-layout/navbar.css') layer(layout);
@import url('header.css') layer(layout); /* Legacy - will be migrated */
@import url('logobar.css') layer(layout); /* Logobar with white background */

/* ========== LAYER: COMPONENTS ========== */
/* Reusable UI components */

@import url('buttons.css') layer(components);
@import url('forms.css') layer(components);
@import url('form.css') layer(components); /* Legacy forms */
@import url('cards-modern.css') layer(components);
@import url('template-certif-gallery.css') layer(components);
@import url('5-components/course-filter.css') layer(components);
@import url('5-components/course-cards.css') layer(components);

/* ========== LAYER: UTILITIES ========== */
/* Single-purpose helper classes */

@import url('utilities.css') layer(utilities);
@import url('6-utilities/inline-replacements.css') layer(utilities);
@import url('6-utilities/template-utilities.css') layer(utilities);

/* ========== LAYER: COMPONENTS (Additional) ========== */
/* Additional components migrated from legacy code */

@import url('5-components/testimonials.css') layer(components);
@import url('5-components/enrollment-payment.css') layer(components);

/* ========== LAYER: PAGES ========== */
/* Page-specific styles (migrated in Phase 3) */

@import url('7-pages/courses.css') layer(pages);
@import url('cursos.css') layer(pages); /* Legacy courses */
@import url('7-pages/enrollment.css') layer(pages);
@import url('7-pages/blog.css') layer(pages);
@import url('resto.css') layer(pages); /* Legacy misc styles */

/* ========== GLOBAL OVERRIDES ========== */
/* Styles outside layers have highest priority */
/* Use sparingly for critical overrides only */

/* Example: Force dark mode for testing */
/* 
body.dark-mode {
  --color-background: #0f172a;
  --color-surface: #1e293b;
}
*/