/*!
 * Japanese Language Analyzer - Main CSS
 * Modular, maintainable CSS architecture
 * 
 * This file imports all CSS modules in the correct order:
 * 1. Core foundations (variables, reset, typography)
 * 2. Themes (light, dark, variants)  
 * 3. Layout systems (responsive, modes)
 * 4. Components (buttons, forms, cards, etc.)
 * 5. Features (dictionary, legend, export, etc.)
 * 6. Effects (glass, animations, interactions)
 * 7. Utilities (helpers, accessibility)
 */

/* === CORE FOUNDATION === */
@import url('core/variables.css');
@import url('core/reset.css');
@import url('core/base.css');
@import url('core/typography.css');

/* === THEMES === */
@import url('themes/theme-variants.css');
@import url('themes/dark.css');

/* === LAYOUT SYSTEMS === */
@import url('layout/responsive.css');

/* === COMPONENTS === */
@import url('components/navigation.css');
@import url('components/buttons.css');
@import url('components/forms.css');
@import url('components/cards.css');
@import url('components/badges.css');
@import url('components/indicators.css');
@import url('components/modals.css');
@import url('components/controls.css');

/* === FEATURES === */
@import url('features/dictionary.css');
@import url('features/legend-base.css');
@import url('features/legend-chips.css');
@import url('features/legend-controls.css');
@import url('features/pos-filters.css');
@import url('features/frequency.css');
@import url('features/kanji.css');
@import url('features/highlight-toggles.css');
@import url('features/token-colors.css');
@import url('features/translate.css');

/* === EFFECTS === */
@import url('effects/glass.css');
@import url('effects/animations.css');
@import url('effects/interactions.css');

/* === UTILITIES === */
@import url('utilities/helpers.css');
@import url('utilities/accessibility.css');
@import url('utilities/rounded-overrides.css');

/* === UPGRADE PAGE STYLES === */
@import url('pages/upgrade.css');

/* 
 * Architecture Benefits:
 * - Modular: Easy to maintain and update individual components
 * - Scalable: New features can be added as separate files  
 * - Performance: Browsers can cache individual modules
 * - Developer Experience: Easy to find and edit specific styles
 * - Maintainable: Clear separation of concerns
 * - Focused: Each file has a single, well-defined responsibility
 * - Discoverable: Intuitive file naming and organization
 * - Lean: No duplicate or unused code
 * 
 * File Structure:
 * css/
 * ├── main.css (this file - imports all modules)
 * ├── core/              (foundational styles)
 * │   ├── variables.css   (CSS custom properties)
 * │   ├── reset.css       (modern CSS reset)
 * │   ├── base.css        (base element styles)
 * │   └── typography.css  (text and font styles)
 * ├── themes/            (color schemes and variants)
 * ├── layout/            (responsive design and layout modes)
 * ├── components/        (reusable UI components)
 * │   ├── badges.css     (status and metadata badges)
 * │   ├── indicators.css (progress and step components)
 * │   └── ... (other component modules)
 * ├── features/          (app-specific functionality)
 * │   ├── legend-base.css     (legend structure)
 * │   ├── legend-chips.css    (chip system)
 * │   ├── legend-controls.css (filter controls)
 * │   └── ... (other feature modules)
 * ├── effects/           (visual enhancements)
 * └── utilities/         (helper classes and accessibility)
 */