/**
 * =========================================
 * MAIN STYLESHEET - Import Orchestrator
 * =========================================
 *
 * Dark Luxury Gaming Theme for SFTP_Viktorina
 * Mobile-first, BEM methodology, Design token system
 *
 * Import Order (Matters!):
 * 1. Tokens (Design system variables)
 * 2. Base (Resets, global styles, utilities)
 * 3. Layout (Containers, grids, responsive)
 * 4. Components (Reusable UI components)
 * 5. Sections (Page-specific sections)
 * 6. Modes (Game mode-specific styles)
 */

/* ============================================
 * 1. DESIGN TOKENS
 * ============================================ */

@import url('./tokens/colors.css');
@import url('./tokens/spacing.css');
@import url('./tokens/typography.css');
@import url('./tokens/motion.css');
@import url('./tokens/z-index.css');

/* ============================================
 * 2. BASE LAYER
 * ============================================ */

@import url('./base/reset.css');
@import url('./base/global.css');
@import url('./base/utilities.css');

/* ============================================
 * 3. LAYOUT SYSTEM
 * ============================================ */

@import url('./layout/containers.css');
@import url('./layout/grid.css');
@import url('./layout/responsive.css');

/* ============================================
 * 4. COMPONENTS
 * ============================================ */

/* @import url('./components/buttons.css');
@import url('./components/forms.css');
@import url('./components/cards.css');
@import url('./components/modals.css');
@import url('./components/user-info.css');
@import url('./components/points-display.css');
@import url('./components/timer.css');
@import url('./components/answer-input.css');
@import url('./components/history-list.css');
@import url('./components/chat.css'); */

/* ============================================
 * 5. SECTIONS
 * ============================================ */

@import url('./sections/header.css');
@import url('./sections/footer.css');
/* @import url('./sections/game-area.css'); */
/* @import url('./sections/user-dashboard.css'); */

/* ============================================
 * 6. GAME MODES (Shared styles)
 * ============================================ */

/* @import url('../_modes/shared-modes.css'); */

/* Mode-specific styles are loaded per-page:
 * - _modes/_classique/classique-css/classique.css
 * - _modes/_family/family-css/family.css
 * - _modes/_golden/golden-css/golden.css
 * - _modes/_chain/chain-css/chain.css
 */

/**
 * =========================================
 * USAGE INSTRUCTIONS
 * =========================================
 *
 * In your HTML, include this single file:
 * <link rel="stylesheet" href="/styles/main.css">
 *
 * This will automatically load all stylesheets in the correct order.
 *
 * =========================================
 * FILE ORGANIZATION
 * =========================================
 *
 * styles/
 * ├── main.css (this file)
 * ├── tokens/
 * │   ├── colors.css ✓
 * │   ├── spacing.css ✓
 * │   ├── typography.css ✓
 * │   ├── motion.css ✓
 * │   └── z-index.css ✓
 * ├── base/
 * │   ├── reset.css ✓
 * │   ├── global.css ✓
 * ├── sections/
 * │   ├── header.css (TODO - refactor existing)
 * │   ├── footer.css (TODO - refactor existing)