/**
 * TrySolitaire CSS Entry Point
 *
 * Modular CSS architecture with design tokens
 * Replaces deprecated styles.css and styles-bridge.css
 *
 * Last Updated: December 2024
 */

/* ===========================================
   1. DESIGN TOKENS
   CSS custom properties for theming
   =========================================== */
@import './tokens/colors.css';
@import './tokens/spacing.css';
@import './tokens/typography.css';
@import './tokens/animation.css';
@import './tokens/layout.css';  /* Dynamic card sizing system */

/* ===========================================
   2. BASE STYLES
   Reset and global defaults
   =========================================== */
@import './base/reset.css';
@import './base/global.css';

/* ===========================================
   3. GAME CONFIGURATION
   CSS custom property-based game layouts
   =========================================== */
@import './games/solitaire-base.css';
@import './games/game-layouts.css';

/* Game-specific styles */
@import './sudoku.css';
@import './2048.css';
@import './mahjong.css';

/* ===========================================
   4. LAYOUT COMPONENTS
   Navigation, containers, overlays
   =========================================== */
@import './layout/navigation.css';
@import './layout/global-menu.css';
@import './layout/game-container.css';
@import './layout/game-layout.css';
@import './layout/game-info-overlay.css';
@import './layout/stats-sidebar.css';
@import './layout/responsive.css';

/* ===========================================
   5. UI COMPONENTS
   Cards, modals, overlays, controls
   =========================================== */
@import './components/cards.css';
@import './components/card-selector.css';
@import './components/game-controls.css';
@import './components/game-selection-overlay.css';
@import './components/modals.css';
@import './components/win-modal.css';
@import './components/preferences-modal.css';
@import './components/profile-dashboard.css';
@import './components/stats.css';
@import './components/breadcrumb.css';
@import './components/footer.css';
@import './components/sound.css';
@import './components/hints.css';
@import './components/language-switcher.css';
@import './components/pwa.css';
@import './components/404.css';

/* ===========================================
   6. FEATURE COMPONENTS
   Gamification, daily challenges, printing
   =========================================== */
@import './components/gamification.css';
@import './components/daily-challenge.css';
@import './components/print-sudoku.css';
@import './components/print-sudoku-modal.css';

/* ===========================================
   7. CONTENT PAGES
   Unified styles for all content pages (434 HTML files)
   =========================================== */
@import './content-pages.css';
@import './landing-page.css';  /* Header and CTA components */

/* ===========================================
   8. UTILITY CLASSES
   (for gradual migration of inline styles)
   =========================================== */

/* Card positioning utilities */
.card-stack {
  & .card {
    --card-index: 0;
    top: calc(var(--card-index) * var(--game-card-overlap, 25px));
  }
}

/* Visual state utilities */
.is-dragging {
  opacity: 0.8;
  z-index: 1000;
  cursor: grabbing;
}

.is-valid-target {
  box-shadow: 0 0 10px var(--color-success);
}

.is-invalid-target {
  animation: shake 0.3s ease;
}

.is-highlighted {
  animation: hintGlow 1s ease-in-out infinite;
}

/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* Spacing utilities */
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.m-auto { margin: auto; }

/* Text utilities */
.text-center { text-align: center; }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }
.font-bold { font-weight: var(--font-bold); }