/**
 * AIM.Shared.UI - Main Stylesheet
 * Version: 1.0.0
 * Created: February 9, 2026
 *
 * Consolidated CSS for AIM Razor Class Library components
 * Part of 6-week modularization project
 */

/* ============================================
   ROOT VARIABLES
   ============================================ */
:root {
    /* AIM Brand Colors — chained to derived system in theme-definitions.css */
    --aim-primary: var(--primary-color);
    --aim-primary-dark: var(--primary-hover);
    --aim-primary-light: var(--interactive-base);

    --aim-secondary: var(--secondary-color);
    --aim-success: var(--color-success-medium);
    --aim-danger: var(--color-danger-medium);
    --aim-warning: var(--color-warning-medium);
    --aim-info: var(--color-info-medium);

    /* Layout Colors */
    --aim-bg-primary: var(--surface-raised);
    --aim-bg-secondary: var(--surface-base);
    --aim-bg-dark: var(--color-neutral-darkest);

    /* Text Colors */
    --aim-text-primary: var(--body-text-color);
    --aim-text-secondary: var(--secondary-light);
    --aim-text-light: var(--color-white);

    /* Border Colors */
    --aim-border: var(--border-subtle);
    --aim-border-dark: var(--border-strong);

    /* Spacing — alias to global scale */
    --aim-spacing-xs: var(--space-xs);
    --aim-spacing-sm: var(--space-sm);
    --aim-spacing-md: var(--space-md);
    --aim-spacing-lg: var(--space-lg);
    --aim-spacing-xl: var(--space-xl);

    /* Border Radius — alias to global scale */
    --aim-radius-sm: var(--radius-sm);
    --aim-radius-md: var(--radius-md);
    --aim-radius-lg: var(--radius-lg);

    /* Shadows — alias to global scale */
    --aim-shadow-sm: var(--shadow-sm);
    --aim-shadow-md: var(--shadow-md);
    --aim-shadow-lg: var(--shadow-lg);

    /* Typography */
    --aim-font-family: var(--font-primary);
    --aim-font-size-base: var(--text-base);
    --aim-font-size-sm: var(--text-sm);
    --aim-font-size-lg: var(--text-lg);
}

/* ============================================
   COMPONENT BASE STYLES
   ============================================ */

/* AIM Component Container */
.aim-component {
    font-family: var(--aim-font-family);
    font-size: var(--aim-font-size-base);
    color: var(--aim-text-primary);
}

/* AIM Card */
.aim-card {
    background-color: var(--aim-bg-primary);
    border: 1px solid var(--aim-border);
    border-radius: var(--aim-radius-md);
    box-shadow: var(--aim-shadow-sm);
    padding: var(--aim-spacing-md);
    margin-bottom: var(--aim-spacing-md);
}

.aim-card-header {
    padding: var(--aim-spacing-md);
    border-bottom: 1px solid var(--aim-border);
    font-weight: 600;
}

.aim-card-body {
    padding: var(--aim-spacing-md);
}

.aim-card-footer {
    padding: var(--aim-spacing-md);
    border-top: 1px solid var(--aim-border);
    background-color: var(--aim-bg-secondary);
}

/* ============================================
   LAYOUT COMPONENTS
   ============================================ */

/* Navbar (will be populated when component is extracted) */
.aim-navbar {
    /* Styles will be added during navbar extraction in Week 2 */
}

/* Sidebar */
.aim-sidebar {
    /* Styles will be added during sidebar extraction */
}

/* Footer */
.aim-footer {
    padding: var(--aim-spacing-lg);
    background-color: var(--aim-bg-dark);
    color: var(--aim-text-light);
    text-align: center;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Spacing Utilities */
.aim-m-0 { margin: 0; }
.aim-m-1 { margin: var(--aim-spacing-xs); }
.aim-m-2 { margin: var(--aim-spacing-sm); }
.aim-m-3 { margin: var(--aim-spacing-md); }
.aim-m-4 { margin: var(--aim-spacing-lg); }
.aim-m-5 { margin: var(--aim-spacing-xl); }

.aim-p-0 { padding: 0; }
.aim-p-1 { padding: var(--aim-spacing-xs); }
.aim-p-2 { padding: var(--aim-spacing-sm); }
.aim-p-3 { padding: var(--aim-spacing-md); }
.aim-p-4 { padding: var(--aim-spacing-lg); }
.aim-p-5 { padding: var(--aim-spacing-xl); }

/* Display Utilities */
.aim-d-none { display: none; }
.aim-d-block { display: block; }
.aim-d-flex { display: flex; }
.aim-d-grid { display: grid; }

/* Flex Utilities */
.aim-flex-row { flex-direction: row; }
.aim-flex-column { flex-direction: column; }
.aim-justify-start { justify-content: flex-start; }
.aim-justify-center { justify-content: center; }
.aim-justify-end { justify-content: flex-end; }
.aim-justify-between { justify-content: space-between; }
.aim-align-start { align-items: flex-start; }
.aim-align-center { align-items: center; }
.aim-align-end { align-items: flex-end; }

/* Text Utilities */
.aim-text-left { text-align: left; }
.aim-text-center { text-align: center; }
.aim-text-right { text-align: right; }
.aim-text-primary { color: var(--aim-primary); }
.aim-text-secondary { color: var(--aim-text-secondary); }
.aim-text-success { color: var(--aim-success); }
.aim-text-danger { color: var(--aim-danger); }
.aim-text-warning { color: var(--aim-warning); }

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    :root {
        --aim-font-size-base: 0.875rem;
    }

    .aim-card {
        padding: var(--aim-spacing-sm);
    }
}

/* ============================================
   COMPONENT IMPORTS
   ============================================ */

/* Individual component CSS files will be imported here as they're created */
/* @import 'components/navbar.css'; */
/* @import 'components/sidebar.css'; */
/* @import 'components/modal.css'; */

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus Styles */
*:focus {
    outline: 2px solid var(--aim-primary);
    outline-offset: 2px;
}

/* Skip Navigation */
.aim-skip-nav {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--aim-primary);
    color: var(--aim-text-light);
    padding: var(--aim-spacing-sm) var(--aim-spacing-md);
    text-decoration: none;
    z-index: 10000;
}

.aim-skip-nav:focus {
    top: 0;
}

/* Screen Reader Only */
.aim-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .aim-navbar,
    .aim-sidebar,
    .aim-footer {
        display: none;
    }

    .aim-card {
        box-shadow: none;
        border: 1px solid var(--color-black);
    }
}