:root {
    /* Tightened Responsive Typography */
    /* Scales smoothly but stays within professional desktop/mobile bounds */
    --text-xs: clamp(0.7rem, 0.65rem + 0.2vw, 0.85rem);
    --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.95rem);
    --text-base: clamp(0.9rem, 0.85rem + 0.3vw, 1.05rem);
    --text-lg: clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.15rem + 0.6vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.35rem + 0.8vw, 2rem);
    --text-3xl: clamp(1.875rem, 1.6rem + 1.2vw, 2.75rem);
    --text-4xl: clamp(2.25rem, 2rem + 1.5vw, 3.5rem);
    --text-5xl: clamp(3rem, 2.5rem + 2vw, 4.5rem);

    /* Responsive Spacing - Scaled down for standard displays */
    --space-1: clamp(0.25rem, 0.2rem + 0.2vw, 0.5rem);
    --space-2: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
    --space-3: clamp(0.75rem, 0.6rem + 0.6vw, 1rem);
    --space-4: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
    --space-6: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    --space-8: clamp(2rem, 1.6rem + 1.6vw, 3rem);
    --space-10: clamp(2.5rem, 2rem + 2vw, 4rem);
    --space-12: clamp(3rem, 2.4rem + 2.4vw, 5rem);
    --space-16: clamp(4rem, 3.2rem + 3.2vw, 7rem);
    --space-20: clamp(5rem, 4rem + 4vw, 9rem);
    --space-24: clamp(6rem, 4.8rem + 4.8vw, 12rem);

    --container-max: 1440px;
    --nav-height: 64px;
}

@media (max-width: 640px) {
    :root {
        --space-6: 1.25rem;
        --space-8: 1.5rem;
        --space-10: 2rem;
    }
}

body {
    font-size: var(--text-base);
    line-height: 1.5;
}

/* Professional Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(19, 127, 236, 0.1);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(19, 127, 236, 0.3);
}

.dark ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.05);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Layout Utilities */
.responsive-container {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.text-clamp-xs { font-size: var(--text-xs); }
.text-clamp-sm { font-size: var(--text-sm); }
.text-clamp-base { font-size: var(--text-base); }
.text-clamp-lg { font-size: var(--text-lg); }
.text-clamp-xl { font-size: var(--text-xl); }
.text-clamp-2xl { font-size: var(--text-2xl); }
.text-clamp-3xl { font-size: var(--text-3xl); }
.text-clamp-4xl { font-size: var(--text-4xl); }
.text-clamp-5xl { font-size: var(--text-5xl); }

/* Material Symbols Styling */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.fill-1 {
    font-variation-settings: 'FILL' 1 !important;
}

/* Glassmorphism */
.glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.dark .glass {
    background: rgba(28, 38, 50, 0.8);
}