/* Base Layer - Foundational Styles */
@layer base {
    /* Smooth theme transition */
    :root.theme-transition,
    :root.theme-transition *,
    :root.theme-transition *::before,
    :root.theme-transition *::after {
        transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
    }
    html,body{
        overflow: hidden;
    }
    
    body {
        font-family: var(--font-sans);
        background: light-dark(
            linear-gradient(135deg, oklch(65% 0.25 270) 0%, oklch(50% 0.25 320) 100%),
            linear-gradient(135deg, oklch(20% 0.05 270) 0%, oklch(15% 0.05 320) 100%)
        );
        color: var(--text-primary);
        font-size: var(--font-size-base);
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-feature-settings: 'cv11', 'ss01', 'ss03';
    }
    
    h1, h2, h3, h4, h5, h6 {
        line-height: 1.2;
    }
    
    /* Scrollbar Styles */
    ::-webkit-scrollbar {
        inline-size: 0.5rem;
        block-size: 0.5rem;
    }
    
    ::-webkit-scrollbar-track {
        background: var(--light);
    }
    
    ::-webkit-scrollbar-thumb {
        background: var(--text-secondary);
        border-radius: 0.25rem;
        
        &:hover {
            background: var(--dark-light);
        }
    }
    
    /* Main Layout */
    .main-content {
        display: flex;
        block-size: 100dvb;
        padding-block-start: 5rem;
        overflow: hidden;
    }
    
    /* Mobile Layout Adjustments */
    @media (max-width: 768px) {
        .main-content {
            flex-direction: column;
            padding-block-start: var(--header-height);
            padding-block-end: 3rem; /* Account for footer */
            block-size: calc(100vh - var(--header-height)); /* Subtract footer height */
            position: relative;
        }
    }
}