/* ========================================
   BASE STYLES & LAYOUT SYSTEM
   ======================================== */

html, body {
    font-family: var(--font-family-sans);
    background-color: var(--bg-dark);
    color: var(--text-primary);
    line-height: var(--line-height-relaxed);
    overflow-x: hidden;
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* Fluid Typography Section Titles */
.section-title {
    font-family: var(--font-family-sans);
    font-size: clamp(var(--font-size-xl), 5vw, var(--font-size-3xl));
    font-weight: var(--font-weight-bold);
    text-align: center;
    margin-bottom: var(--space-md);
    position: relative;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--gradient);
    border-radius: 2px;
}

.section-subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: clamp(var(--font-size-sm), 3vw, var(--font-size-md));
    margin-bottom: var(--space-3xl);
    font-weight: var(--font-weight-normal);
}

/* Utility Classes */
.gradient-text {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.highlight {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Selection and scrollbars */
::selection {
    background: rgba(0, 242, 254, 0.25);
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-radius: 40px;
    border: 2px solid var(--bg-dark);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--secondary-color) 0%, var(--primary-color) 100%);
}

/* Placeholder Heights to Minimize Cumulative Layout Shift (CLS) */
#hero-section {
    min-height: 100vh;
}
#about-section {
    min-height: 80vh;
}
#projects-section {
    min-height: 80vh;
}
#github-section {
    min-height: 70vh;
}
#experience-section {
    min-height: 60vh;
}
#skills-section {
    min-height: 50vh;
}
#certifications-section {
    min-height: 50vh;
}
#contact-section {
    min-height: 60vh;
}