/* index.css - Main CSS entry point */

/* Import order is important for proper cascade */

/* 1. Variables - Design tokens and CSS custom properties */
@import 'variables.css';

/* 2. Base - Reset, typography, and basic element styling */
@import 'base.css';

/* 3. Layout - Page structure and layout components */
@import 'layout.css';

/* 4. Components - Reusable UI components */
@import 'components.css';

/* 5. Features - Specific feature styles */
/* Choose one based on the page type */
/* @import 'chat.css'; */
/* @import 'admin.css'; */

/* 6. Utilities - Helper classes (should have highest specificity) */
@import 'utilities.css';

/* 
   Use the appropriate @import statement in your HTML files
   based on the page type:

   For chat pages:
   <link rel="stylesheet" href="/css/index.css">
   <link rel="stylesheet" href="/css/chat.css">

   For admin pages:
   <link rel="stylesheet" href="/css/index.css">
   <link rel="stylesheet" href="/css/admin.css">
*/