/**
 * Main CSS Entry Point
 * Following ITCSS (Inverted Triangle CSS) methodology
 * Import order matters - from generic to specific
 */

/* =========================================
   LAYER 1: SETTINGS & TOKENS
   Design tokens, variables, and configuration
   ========================================= */
@import url('design-system/tokens.css');

/* =========================================
   LAYER 2: RESET & NORMALIZATION
   CSS reset and base element normalization
   ========================================= */
@import url('design-system/reset.css');

/* =========================================
   LAYER 2.5: ACCESSIBILITY FOUNDATION
   Focus styles, screen reader utilities, skip links
   Imported early to ensure focus styles are applied
   ========================================= */
@import url('design-system/accessibility.css');

/* =========================================
   LAYER 3: BASE TYPOGRAPHY
   Base typographic styles and font setup
   ========================================= */
@import url('design-system/typography.css');

/* =========================================
   LAYER 4: LAYOUT SYSTEM
   Grid, flexbox, and layout primitives
   ========================================= */
@import url('design-system/layout.css');

/* =========================================
   LAYER 5: LEGACY/EXISTING STYLES
   Existing site styles (maintained for compatibility)
   These will be gradually refactored to use design tokens
   ========================================= */
@import url('site.css');

/* =========================================
   LAYER 6: COMPONENTS
   Reusable UI components (loaded after legacy styles
   to ensure design system takes precedence)
   ========================================= */
@import url('components/header.css');
@import url('components/buttons.css');
@import url('components/forms.css');
@import url('components/cards.css');
@import url('components/hero.css');
@import url('components/footer.css');
@import url('components/donation-flow.css');
@import url('components/impact.css');
@import url('components/testimonials.css');
@import url('components/modals.css');
@import url('components/notifications.css');

/* =========================================
   LAYER 6.5: ANIMATIONS
   Motion design and scroll-triggered reveals
   ========================================= */
@import url('design-system/animations.css');

/* =========================================
   LAYER 7: RESPONSIVE OVERRIDES
   Mobile-first responsive design fixes and
   breakpoint-specific adjustments
   Must be last to override component styles
   ========================================= */
@import url('design-system/responsive.css');

/* =========================================
   LAYER 7.5: DARK MODE
   Dark theme token overrides and component styles
   Imported near the end to override light mode defaults
   ========================================= */
@import url('design-system/dark-mode.css');

/* =========================================
   LAYER 8: RTL OVERRIDES
   Right-to-left language support
   Loaded conditionally via _Layout.cshtml
   ========================================= */
/* @import url('site.rtl.css'); - Loaded conditionally */

/* =========================================
   LAYER 9: PAGE-SPECIFIC STYLES
   Loaded conditionally via RenderSection("Styles")
   - admin-donations.css
   - fundraiser-dashboard.css
   - file-upload.css
   ========================================= */

/* =========================================
   GLOBAL DESIGN SYSTEM OVERRIDES
   Ensure design system tokens take precedence
   ========================================= */

:root {
    /* Ensure core body styles use design system */
    color-scheme: light dark;
}

/* Apply design system defaults to body */
body {
    background-color: var(--color-background);
    color: var(--color-text);
}

/* Ensure focus states are consistent */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Smooth scrolling with reduced motion support */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* =========================================
   FINAL VISUAL POLISH
   Consistent styling and polish across site
   ========================================= */

/**
 * Text selection styles
 * Brand-colored selection for consistent feel
 */
::selection {
    background-color: var(--color-primary);
    color: var(--color-white);
}

::-moz-selection {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/**
 * Consistent transitions
 * All transitions use the same easing function family
 */
a,
button,
input,
textarea,
select {
    transition-timing-function: var(--ease-out);
}

/**
 * Scrollbar styling (WebKit browsers)
 * Subtle, professional scrollbar design
 */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-neutral-100);
}

::-webkit-scrollbar-thumb {
    background: var(--color-neutral-300);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-neutral-400);
}

/* Dark mode scrollbar */
@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) ::-webkit-scrollbar-track {
        background: var(--color-neutral-800);
    }

    :root:not(.light-mode) ::-webkit-scrollbar-thumb {
        background: var(--color-neutral-600);
    }

    :root:not(.light-mode) ::-webkit-scrollbar-thumb:hover {
        background: var(--color-neutral-500);
    }
}

.dark-mode ::-webkit-scrollbar-track {
    background: var(--color-neutral-800);
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--color-neutral-600);
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--color-neutral-500);
}

/**
 * Firefox scrollbar styling
 */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-neutral-300) var(--color-neutral-100);
}

@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) * {
        scrollbar-color: var(--color-neutral-600) var(--color-neutral-800);
    }
}

.dark-mode * {
    scrollbar-color: var(--color-neutral-600) var(--color-neutral-800);
}

/**
 * Print styles
 * Basic print optimization
 */
@media print {
    .site-header,
    .site-footer,
    .back-to-top,
    .skip-link,
    .theme-toggle,
    .hero__scroll {
        display: none !important;
    }

    body {
        background: white !important;
        color: black !important;
    }

    a {
        text-decoration: underline;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ccc;
        break-inside: avoid;
    }
}

/**
 * Performance note for production:
 * The @import statements above are convenient for development
 * but should be concatenated into a single file for production
 * to eliminate HTTP request chains. Use a build tool like:
 * - PostCSS with postcss-import
 * - Sass/SCSS compilation
 * - A CSS bundler like cssnano
 */