/* 
 * DiffuseMind CSS - Modular Architecture
 * Main entry point that imports all CSS modules in the correct cascade order
 * 
 * Architecture Overview:
 * 1. Theme System - CSS variables and theming
 * 2. Typography - Text styles and font system  
 * 3. Layout - Grid, containers, and structural elements
 * 4. Components - Reusable UI components (buttons, forms, etc.)
 * 5. Cards - Content cards and card-based layouts
 * 6. Sections - Page-specific sections and layouts
 * 7. Responsive - Media queries and responsive design
 * 
 * Benefits of this modular approach:
 * - Better maintainability and organization
 * - Easier debugging and development
 * - Reduced file size through targeted loading
 * - Clear separation of concerns
 * - LLM-friendly structure for faster development
 */

/* ===== FOUNDATION LAYER ===== */
/* Import theme variables and design tokens first */
@import url("theme.css");

/* ===== TYPOGRAPHY LAYER ===== */
/* Import typography system */
@import url("typography.css");

/* ===== LAYOUT LAYER ===== */
/* Import layout structures and containers */
@import url("layout.css");

/* ===== COMPONENT LAYER ===== */
/* Import reusable UI components */
@import url("components.css");

/* ===== CARD LAYER ===== */
/* Import card-based components */
@import url("cards.css");

/* ===== SECTION LAYER ===== */
/* Import page-specific sections and layouts */
@import url("sections.css");

/* ===== ARTICLE LAYER ===== */
/* Import article-specific styles */
@import url("article.css");

/* ===== RESPONSIVE LAYER ===== */
/* Import responsive adjustments and media queries last */
@import url("responsive.css");

/* ===== UTILITIES ===== */
/* Utility classes for quick adjustments */
.hidden {
  display: none !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Debug helpers (remove in production) */
.debug-grid * {
  outline: 1px solid red !important;
}

.debug-spacing * {
  background-color: rgba(255, 0, 0, 0.1) !important;
}