/* ========================================
   KEVIN POWELL CSS FRAMEWORK - Modular Architecture
   Modern CSS 2026 - Professional Approach
   Based on Kevin Powell's methodologies and best practices
   ======================================== */
/* Cache bust version: 20260213 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ========================================
   IMPORTS ORDER - Dependencies matter!
   1. Foundations (variables, base styles)
   2. Utilities (reusable classes)
   3. Layout (structure)
   4. Components (UI elements)
   5. Pages (specific views)
   6. Themes (dark mode, colors)
   7. Responsive (breakpoints)
   ======================================== */

/* 1. FOUNDATIONS */
@import "variables-gqRVKTi.css";
@import "base-eNXEmqz.css";

/* 2. UTILITIES */
@import "utilities-uBUWmYR.css";

/* 3. LAYOUT */
@import "layout-9QCFq2o.css";

/* 4. COMPONENTS */
@import "components-rcEkjYj.css";
@import "forms-bAayeDz.css";
@import "modals-EzQe1C0.css";
@import "dashboard-QyCjZ6V.css";
@import "avatars-ebrhCuF.css";

/* 5. PAGES / VIEWS */
@import "tables-5Mh_LFW.css";
@import "show-views-pEtyEXx.css";

/* 6. THEMES */
@import "themes-R8WXtoK.css";

/* 7. RESPONSIVE */
@import "responsive-Dr-wgYm.css";

/* ========================================
   PROGRESSIVE ENHANCEMENTS
   Kevin Powell loves progressive enhancement!
   ======================================== */

/* Scroll-driven animations - if supported */
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .fade-in-on-scroll {
            animation: fade-in linear;
            animation-timeline: view();
            animation-range: entry 0% cover 40%;
        }

        @keyframes fade-in {
            from {
                opacity: 0;
                transform: translateY(2rem);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    }
}

/* View Transitions API - Kevin Powell showcases this */
@view-transition {
    navigation: auto;
}

/* CSS Nesting - Now supported in all modern browsers! */
.nested-example {
    color: var(--clr-neutral-900);

    &:hover {
        color: var(--clr-primary);
    }

    & .nested-child {
        margin-block-start: var(--space-sm);
    }
}

/* :has() selector - Kevin Powell calls it the "parent selector"
   Game changer for CSS!
   Fallback for browsers that don't support :has() (< Chrome 105) */
@supports selector(:has(img)) {
    .card:has(img) {
        /* Style cards that contain images differently */
        display: grid;
        grid-template-rows: auto 1fr;
    }
}

/* Fallback for browsers without :has() support */
@supports not selector(:has(img)) {
    .card img+.card__content {
        /* Alternative styling for cards with images in older browsers */
        grid-template-rows: auto 1fr;
    }
}

/* :is() and :where() for reduced specificity
   Kevin Powell emphasizes understanding specificity */
:is(h1, h2, h3)+p {
    margin-block-start: 0;
}

/* :where() has 0 specificity - easier to override */
:where(.btn) {
    /* These styles can be easily overridden */
    cursor: pointer;
}