/* ScoutAI - Master Stylesheet v2.0 */
/* Modern Architecture: System > Components > Utilities */

/* 1. Base Foundation */
@import url('base/variables.css');
/* Ensuring variable fallbacks */
@import url('base/reset.css');
/* Reset browser defaults */
@import url('base/typography.css');
/* Global font settings */

/* 2. Design System Tokens (The Core) */
@import url('brand.css');

/* 3. Component Layer */
@import url('components/buttons.css');
@import url('components/cards.css');
@import url('components/forms.css');
@import url('components/modals.css');

/* 4. Global Utilities */
@import url('utilities/animations.css');

/* --- Global Modern Resets --- */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--surface-dim);
    color: var(--text-main);
    line-height: 1.6;
}

/* --- Container System --- */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-6);
    padding-right: var(--space-6);
    max-width: 1280px;
}

/* --- Flexbox & Grid Helpers (Tailwind-like) --- */
/* Note: We use Tailwind CDN in the header, but these help for custom components 
   that need specific overrides or non-Tailwind contexts */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* --- Accessibility & Focus --- */
:focus-visible {
    outline: 2px solid var(--brand-primary-500);
    outline-offset: 2px;
}

/* --- Global Loading State --- */
.loading-skeleton {
    background: linear-gradient(90deg, var(--neutral-100) 0%, var(--neutral-200) 50%, var(--neutral-100) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* --- Toast Notification Fixes --- */
#toast-container {
    position: fixed;
    top: var(--space-6);
    right: var(--space-6);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    pointer-events: none;
}

#toast-container>* {
    pointer-events: auto;
    animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}