/* 
 * Trev Translation Platform - Main CSS File
 * This file imports all CSS modules in the correct order
 * 
 * File Structure:
 * 1. Base styles (reset, variables, typography)
 * 2. Layout (app structure, containers)
 * 3. Components (reusable UI elements)
 * 4. Page-specific styles
 * 5. Utilities and helpers
 */

/* 1. Foundation */
@import url('base.css');

/* 2. Layout & Structure */
@import url('layout.css');
@import url('header.css');  /* Unified header component */

/* 3. Components */
@import url('components.css');
@import url('notifications.css');

/* 4. Page-Specific Styles */
@import url('dashboard.css');
@import url('translator.css');
@import url('usage.css');
@import url('history.css');
@import url('settings.css');
@import url('auth.css');
@import url('pricing.css');

/* 5. Utilities */
@import url('responsive.css');
@import url('utilities.css');

/* 
 * CSS Architecture Guidelines:
 * 
 * - Use CSS variables defined in base.css for consistency
 * - Follow BEM naming convention for components
 * - Keep specificity low (max 2-3 levels)
 * - Use utility classes for minor adjustments
 * - Media queries are centralized in responsive.css
 * 
 * Color Palette:
 * - Primary: #475569 (Lighter slate)
 * - Accent Teal: #14B8A6 (From logo)
 * - Accent Coral: #DC2626 (For errors/warnings)
 * - Grays: See base.css for full scale
 * 
 * Spacing Scale:
 * - xs: 0.25rem
 * - sm: 0.5rem
 * - md: 1rem
 * - lg: 1.5rem
 * - xl: 2rem
 * - 2xl: 3rem
 * - 3xl: 4rem
 */