/**
 * Main Stylesheet
 * Academic Legal Website
 * 
 * Modular CSS architecture with design system
 * Mobile-first responsive design
 * Professional, academic aesthetic
 * 
 * Table of Contents:
 * 1. CSS Variables (Design Tokens)
 * 2. Base Styles & Reset
 * 3. Typography System
 * 4. Layout Components (Header, Navigation, Footer)
 * 5. Layout & Containers
 * 6. Components (to be added in Phase 3)
 * 7. Page-specific styles (to be added in Phase 4-5)
 * 8. Utilities
 */

/* ============================================================================
   1. DESIGN SYSTEM - Variables & Tokens
   ========================================================================= */
@import 'variables.css';

/* ============================================================================
   2. BASE STYLES - Reset & Foundations
   ========================================================================= */
@import 'base.css';

/* ============================================================================
   3. TYPOGRAPHY - Font System
   ========================================================================= */
@import 'typography.css';

/* ============================================================================
   4. LAYOUT COMPONENTS - Header, Navigation, Footer
   ========================================================================= */
@import 'layout/header.css';
@import 'layout/navigation.css';
@import 'layout/footer.css';

/* ============================================================================
   5. COMPONENT LIBRARY
   ========================================================================= */
@import 'components/buttons.css';
@import 'components/cards.css';
@import 'components/forms.css';
@import 'components/tags.css';
@import 'components/timeline.css';
@import 'components/stats.css';

/* ============================================================================
   6. UTILITIES
   ========================================================================= */
@import 'utilities/grid.css';

/* ============================================================================
   7. PAGE-SPECIFIC STYLES
   ========================================================================= */
@import 'pages/home.css';
@import 'pages/articles.css';
@import 'pages/article.css';
@import 'pages/about.css';
@import 'pages/search.css';
@import 'pages/news.css';
@import 'pages/awards.css';

/* ============================================================================
   8. DARK MODE & ANIMATIONS
   ========================================================================= */
@import 'dark-mode.css';
@import 'animations.css';

/* ============================================================================
   9. LAYOUT & CONTAINERS
   ========================================================================= */

.container {
    width: 100%;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--space-lg);
    }
}

/* Container size variants */
.container-sm {
    max-width: var(--container-sm);
}

.container-md {
    max-width: var(--container-md);
}

.container-lg {
    max-width: var(--container-lg);
}

.container-xl {
    max-width: var(--container-xl);
}

.container-2xl {
    max-width: var(--container-2xl);
}

.container-full {
    max-width: 100%;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
}

/* Section spacing */
.section {
    padding: var(--space-2xl) 0;
}

@media (min-width: 768px) {
    .section {
        padding: var(--space-3xl) 0;
    }
}

@media (min-width: 1024px) {
    .section {
        padding: var(--space-4xl) 0;
    }
}

/* Alternate section background */
.section-alt {
    background-color: var(--light-bg);
}

/* ============================================================================
   10. ADDITIONAL UTILITIES
   ========================================================================= */

/* Display utilities */
.block         { display: block; }
.inline-block  { display: inline-block; }
.inline        { display: inline; }
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.grid          { display: grid; }
.hidden        { display: none; }

/* Flexbox utilities */
.flex-row            { flex-direction: row; }
.flex-col            { flex-direction: column; }
.flex-wrap           { flex-wrap: wrap; }
.flex-nowrap         { flex-wrap: nowrap; }
.items-start         { align-items: flex-start; }
.items-center        { align-items: center; }
.items-end           { align-items: flex-end; }
.items-stretch       { align-items: stretch; }
.justify-start       { justify-content: flex-start; }
.justify-center      { justify-content: center; }
.justify-end         { justify-content: flex-end; }
.justify-between     { justify-content: space-between; }
.justify-around      { justify-content: space-around; }

/* Gap utilities */
.gap-xs    { gap: var(--space-xs); }
.gap-sm    { gap: var(--space-sm); }
.gap-md    { gap: var(--space-md); }
.gap-lg    { gap: var(--space-lg); }
.gap-xl    { gap: var(--space-xl); }
.gap-2xl   { gap: var(--space-2xl); }

/* Margin utilities */
.m-0       { margin: 0; }
.m-auto    { margin: auto; }
.m-xs      { margin: var(--space-xs); }
.m-sm      { margin: var(--space-sm); }
.m-md      { margin: var(--space-md); }
.m-lg      { margin: var(--space-lg); }
.m-xl      { margin: var(--space-xl); }
.m-2xl     { margin: var(--space-2xl); }
.m-3xl     { margin: var(--space-3xl); }

/* Margin top */
.mt-0      { margin-top: 0; }
.mt-auto   { margin-top: auto; }
.mt-xs     { margin-top: var(--space-xs); }
.mt-sm     { margin-top: var(--space-sm); }
.mt-md     { margin-top: var(--space-md); }
.mt-lg     { margin-top: var(--space-lg); }
.mt-xl     { margin-top: var(--space-xl); }
.mt-2xl    { margin-top: var(--space-2xl); }
.mt-3xl    { margin-top: var(--space-3xl); }

/* Margin bottom */
.mb-0      { margin-bottom: 0; }
.mb-auto   { margin-bottom: auto; }
.mb-xs     { margin-bottom: var(--space-xs); }
.mb-sm     { margin-bottom: var(--space-sm); }
.mb-md     { margin-bottom: var(--space-md); }
.mb-lg     { margin-bottom: var(--space-lg); }
.mb-xl     { margin-bottom: var(--space-xl); }
.mb-2xl    { margin-bottom: var(--space-2xl); }
.mb-3xl    { margin-bottom: var(--space-3xl); }

/* Margin left */
.ml-0      { margin-left: 0; }
.ml-auto   { margin-left: auto; }
.ml-xs     { margin-left: var(--space-xs); }
.ml-sm     { margin-left: var(--space-sm); }
.ml-md     { margin-left: var(--space-md); }
.ml-lg     { margin-left: var(--space-lg); }
.ml-xl     { margin-left: var(--space-xl); }

/* Margin right */
.mr-0      { margin-right: 0; }
.mr-auto   { margin-right: auto; }
.mr-xs     { margin-right: var(--space-xs); }
.mr-sm     { margin-right: var(--space-sm); }
.mr-md     { margin-right: var(--space-md); }
.mr-lg     { margin-right: var(--space-lg); }
.mr-xl     { margin-right: var(--space-xl); }

/* Padding utilities */
.p-0       { padding: 0; }
.p-xs      { padding: var(--space-xs); }
.p-sm      { padding: var(--space-sm); }
.p-md      { padding: var(--space-md); }
.p-lg      { padding: var(--space-lg); }
.p-xl      { padding: var(--space-xl); }
.p-2xl     { padding: var(--space-2xl); }
.p-3xl     { padding: var(--space-3xl); }

/* Padding top */
.pt-0      { padding-top: 0; }
.pt-xs     { padding-top: var(--space-xs); }
.pt-sm     { padding-top: var(--space-sm); }
.pt-md     { padding-top: var(--space-md); }
.pt-lg     { padding-top: var(--space-lg); }
.pt-xl     { padding-top: var(--space-xl); }
.pt-2xl    { padding-top: var(--space-2xl); }

/* Padding bottom */
.pb-0      { padding-bottom: 0; }
.pb-xs     { padding-bottom: var(--space-xs); }
.pb-sm     { padding-bottom: var(--space-sm); }
.pb-md     { padding-bottom: var(--space-md); }
.pb-lg     { padding-bottom: var(--space-lg); }
.pb-xl     { padding-bottom: var(--space-xl); }
.pb-2xl    { padding-bottom: var(--space-2xl); }

/* Padding left */
.pl-0      { padding-left: 0; }
.pl-xs     { padding-left: var(--space-xs); }
.pl-sm     { padding-left: var(--space-sm); }
.pl-md     { padding-left: var(--space-md); }
.pl-lg     { padding-left: var(--space-lg); }
.pl-xl     { padding-left: var(--space-xl); }

/* Padding right */
.pr-0      { padding-right: 0; }
.pr-xs     { padding-right: var(--space-xs); }
.pr-sm     { padding-right: var(--space-sm); }
.pr-md     { padding-right: var(--space-md); }
.pr-lg     { padding-right: var(--space-lg); }
.pr-xl     { padding-right: var(--space-xl); }

/* Width utilities */
.w-full    { width: 100%; }
.w-auto    { width: auto; }

/* Max width utilities */
.max-w-sm  { max-width: var(--container-sm); }
.max-w-md  { max-width: var(--container-md); }
.max-w-lg  { max-width: var(--container-lg); }
.max-w-xl  { max-width: var(--container-xl); }

/* Background utilities */
.bg-white      { background-color: var(--white); }
.bg-light      { background-color: var(--light-bg); }
.bg-primary    { background-color: var(--primary); }
.bg-accent     { background-color: var(--accent); }
.bg-success    { background-color: var(--success-light); }
.bg-warning    { background-color: var(--warning-light); }
.bg-error      { background-color: var(--error-light); }
.bg-info       { background-color: var(--info-light); }

/* Border utilities */
.border        { border: 1px solid var(--border-color); }
.border-0      { border: 0; }
.border-t      { border-top: 1px solid var(--border-color); }
.border-b      { border-bottom: 1px solid var(--border-color); }
.border-l      { border-left: 1px solid var(--border-color); }
.border-r      { border-right: 1px solid var(--border-color); }

/* Border radius */
.rounded-none  { border-radius: var(--radius-none); }
.rounded-sm    { border-radius: var(--radius-sm); }
.rounded-md    { border-radius: var(--radius-md); }
.rounded-lg    { border-radius: var(--radius-lg); }
.rounded-xl    { border-radius: var(--radius-xl); }
.rounded-full  { border-radius: var(--radius-full); }

/* Shadow utilities */
.shadow-none   { box-shadow: none; }
.shadow-sm     { box-shadow: var(--shadow-sm); }
.shadow-md     { box-shadow: var(--shadow-md); }
.shadow-lg     { box-shadow: var(--shadow-lg); }
.shadow-xl     { box-shadow: var(--shadow-xl); }

/* ============================================================================
   END OF STYLESHEET
   
   Components, layouts, and page-specific styles will be added in subsequent phases
   ========================================================================= */