/* ============================================
   GLOBAL TYPOGRAPHY OVERHAUL (PHASE 2)
   Premium Web Fonts and Spacing Fixes
   ============================================ */

/* 1. Import Premium Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;700;800&family=Fira+Code:wght@400;500;600&display=swap');

/* 2. Global Font Overrides */
:root {
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    --font-heading: 'Plus Jakarta Sans', var(--font-primary) !important;
    --font-mono: 'Fira Code', monospace !important;
}

body {
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.015em;
}

h1, h2, h3, h4, h5, h6, .hero-title, .section-title, .project-card-title, .experience-card-title {
    font-family: var(--font-heading) !important;
    letter-spacing: -0.03em;
}

/* 3. Hero Section Typographic Fixes */
.hero-title {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.hero-title-gradient {
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.04em !important;
    font-weight: 800 !important;
    white-space: pre-wrap;
    background: linear-gradient(135deg, #fff 10%, var(--color-cyan) 60%, var(--color-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 30px rgba(14, 165, 233, 0.2);
    display: block !important;
    margin-bottom: 0.5rem;
}

.hero-title-name {
    font-size: clamp(2.5rem, 6vw, 4rem) !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: -0.05em !important;
    color: var(--color-text);
    display: block !important;
}

.hero-role {
    font-family: var(--font-primary);
    font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
    font-weight: 500 !important;
    color: var(--color-text-secondary);
    letter-spacing: 0.02em;
    margin-bottom: 2rem !important;
    opacity: 0.9;
}

/* 4. Text Readability Improvements */
p {
    line-height: 1.7 !important;
    font-size: 1.05rem !important;
    color: var(--color-text-secondary);
}

.highlight {
    font-weight: 600;
    color: var(--color-cyan);
}

.highlight-word {
    background: linear-gradient(90deg, var(--color-primary), var(--color-cyan));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800 !important;
}

.section-title {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    margin-bottom: 1rem !important;
}

.section-subtitle {
    font-size: 1.15rem !important;
    color: var(--color-text-tertiary) !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
}