/* ===================================
   VALE DA BÊNÇÃO - Main CSS
   CSS Orchestrator - Imports All Styles
   =================================== */

/* ===== CORE IMPORTS ===== */

/* 1. Variables - Design system tokens */
@import url('variables.css');

/* 2. Reset - Modern CSS reset */
@import url('reset.css');

/* 3. Layout - Container, Grid, Flexbox & Utilities */
@import url('layout.css');

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

/* 4. Base Components - Buttons, Cards, Badges, Forms, etc. */
@import url('components.css');

/* 5. Header - Sticky header & navigation */
@import url('header.css');

/* 6. Footer - Modern footer with grid */
@import url('footer.css');

/* 7. Hero Sections - Hero sections with gradients */
@import url('hero.css');

/* 8. Cards - Program, event, testimonial, partner cards */
@import url('cards.css');

/* 9. Sections - Stats, timeline, gallery, transparency */
@import url('sections.css');

/* 10. Animations - Fade in, slide, hover effects */
@import url('animations.css');

/* ===== RESPONSIVE IMPORT ===== */

/* 11. Responsive - Mobile-first breakpoints */
@import url('responsive.css');

/* ===== LEGACY SUPPORT (to be removed after migration) ===== */

/* Compatibility aliases for old variables */
:root {
    /* Mapping old variable names to new ones for backward compatibility */
    --color-primary: var(--color-brand-primary);
    --color-primary-dark: var(--color-brand-primary-dark);
    --color-secondary: var(--color-brand-secondary);
    --color-secondary-dark: var(--color-brand-secondary-dark);
    --spacing-xs: var(--spacing-2);
    --spacing-sm: var(--spacing-3);
    --spacing-md: var(--spacing-4);
    --spacing-lg: var(--spacing-6);
    --spacing-xl: var(--spacing-8);
    --spacing-2xl: var(--spacing-12);
    --spacing-3xl: var(--spacing-16);
    --spacing-4xl: var(--spacing-24);
    --header-height: var(--header-height-mobile);
}

@media (min-width: 1024px) {
    :root {
        --header-height: var(--header-height-desktop);
    }
}

/* Typography base styles */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold, 700);
    line-height: var(--line-height-tight, 1.2);
    color: var(--text-primary);
}

h1 {
    font-size: var(--font-size-4xl, 2.25rem);
    margin-bottom: var(--spacing-6, 1.5rem);
}

h2 {
    font-size: var(--font-size-3xl, 1.875rem);
    margin-bottom: var(--spacing-4, 1rem);
}

h3 {
    font-size: var(--font-size-2xl, 1.5rem);
    margin-bottom: var(--spacing-3, 0.75rem);
}

h4 {
    font-size: var(--font-size-xl, 1.25rem);
    margin-bottom: var(--spacing-2, 0.5rem);
}

h5 {
    font-size: var(--font-size-lg, 1.125rem);
    margin-bottom: var(--spacing-2, 0.5rem);
}

h6 {
    font-size: var(--font-size-base, 1rem);
    margin-bottom: var(--spacing-2, 0.5rem);
}

p {
    margin-bottom: var(--spacing-4, 1rem);
}

/* ===== GLOBAL UTILITIES ===== */

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Better text rendering */
body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Selection colors */
::selection {
    background-color: var(--color-brand-primary-lightest, #FFE8DB);
    color: var(--color-brand-primary-dark, #E55A00);
}

::-moz-selection {
    background-color: var(--color-brand-primary-lightest, #FFE8DB);
    color: var(--color-brand-primary-dark, #E55A00);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary, #FAFAFA);
}

::-webkit-scrollbar-thumb {
    background: var(--color-neutral-300, #D0D0D0);
    border-radius: var(--radius-full, 9999px);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-brand-primary, #FF6900);
}

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

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: var(--z-tooltip, 1070);
    padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
    background: var(--color-brand-primary, #FF6900);
    color: var(--color-white, #FFFFFF);
    text-decoration: none;
    border-radius: 0 var(--radius-default, 0.5rem) var(--radius-default, 0.5rem) 0;
}

.skip-to-content:focus {
    top: 0;
}

/* Focus visible styles */
*:focus-visible {
    outline: 2px solid var(--color-brand-primary, #FF6900);
    outline-offset: 2px;
}

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

@media print {
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    .no-print {
        display: none !important;
    }

    .section {
        page-break-inside: avoid;
    }

    h1, h2, h3 {
        page-break-after: avoid;
    }
}