/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY SYSTEM 2026 - PREMIUM RESPONSIVE DESIGN
   Modern, accessible typography with fluid scaling and premium fonts
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES - TYPOGRAPHY TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* === FONT FAMILIES === */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;

    /* === FONT WEIGHTS === */
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* === LINE HEIGHTS === */
    --lh-tight: 1.1;
    --lh-snug: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;
    --lh-loose: 1.8;

    /* === LETTER SPACING === */
    --ls-tighter: -0.03em;
    --ls-tight: -0.02em;
    --ls-normal: 0;
    --ls-wide: 0.02em;
    --ls-wider: 0.05em;

    /* === FLUID FONT SIZES (Mobile → Desktop) === */
    /* Using clamp() for smooth scaling: clamp(min, preferred, max) */

    /* Display - Hero headlines */
    --fs-display-xl: clamp(2.5rem, 6vw + 1rem, 5rem);
    /* 40px → 80px */
    --fs-display-lg: clamp(2rem, 4vw + 1rem, 4rem);
    /* 32px → 64px */
    --fs-display-md: clamp(1.75rem, 3vw + 0.75rem, 3rem);
    /* 28px → 48px */

    /* Headings */
    --fs-h1: clamp(2rem, 3.5vw + 0.5rem, 3.5rem);
    /* 32px → 56px */
    --fs-h2: clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
    /* 24px → 36px */
    --fs-h3: clamp(1.25rem, 1.5vw + 0.25rem, 1.75rem);
    /* 20px → 28px */
    --fs-h4: clamp(1.125rem, 1vw + 0.25rem, 1.375rem);
    /* 18px → 22px */
    --fs-h5: clamp(1rem, 0.5vw + 0.25rem, 1.125rem);
    /* 16px → 18px */
    --fs-h6: clamp(0.875rem, 0.25vw + 0.25rem, 1rem);
    /* 14px → 16px */

    /* Body text */
    --fs-body-xl: clamp(1.125rem, 0.5vw + 0.25rem, 1.25rem);
    /* 18px → 20px */
    --fs-body-lg: clamp(1rem, 0.25vw + 0.25rem, 1.125rem);
    /* 16px → 18px */
    --fs-body: clamp(0.9375rem, 0.2vw + 0.25rem, 1rem);
    /* 15px → 16px */
    --fs-body-sm: clamp(0.8125rem, 0.1vw + 0.25rem, 0.875rem);
    /* 13px → 14px */
    --fs-body-xs: clamp(0.6875rem, 0.1vw + 0.125rem, 0.75rem);
    /* 11px → 12px */

    /* Navigation */
    --fs-nav: clamp(0.8125rem, 0.2vw + 0.125rem, 0.875rem);
    /* 13px → 14px */
    --fs-nav-mobile: 1rem;
    /* 16px fixed for mobile menu */

    /* Buttons & UI */
    --fs-btn-lg: clamp(1rem, 0.25vw + 0.25rem, 1.125rem);
    /* 16px → 18px */
    --fs-btn: clamp(0.875rem, 0.2vw + 0.25rem, 1rem);
    /* 14px → 16px */
    --fs-btn-sm: clamp(0.75rem, 0.1vw + 0.25rem, 0.875rem);
    /* 12px → 14px */

    /* Labels & Captions */
    --fs-label: 0.75rem;
    /* 12px */
    --fs-caption: 0.6875rem;
    /* 11px */

    /* === TEXT COLORS - LIGHT MODE === */
    --text-primary-light: #1d1d1f;
    --text-secondary-light: #424245;
    --text-tertiary-light: #6e6e73;
    --text-muted-light: #86868b;
    --text-placeholder-light: #a1a1a6;

    /* === TEXT COLORS - DEFAULT (Light) === */
    --text-color-primary: var(--text-primary-light);
    --text-color-secondary: var(--text-secondary-light);
    --text-color-tertiary: var(--text-tertiary-light);
    --text-color-muted: var(--text-muted-light);
}

/* === DARK MODE TEXT COLORS === */
html.dark {
    --text-primary-dark: #f5f5f7;
    --text-secondary-dark: #d2d2d7;
    --text-tertiary-dark: #a1a1a6;
    --text-muted-dark: #86868b;
    --text-placeholder-dark: #6e6e73;

    --text-color-primary: var(--text-primary-dark);
    --text-color-secondary: var(--text-secondary-dark);
    --text-color-tertiary: var(--text-tertiary-dark);
    --text-color-muted: var(--text-muted-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE TYPOGRAPHY STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Body */
body {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    color: var(--text-color-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern' 1, 'liga' 1;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--text-color-primary);
    margin-top: 0;
}

h1 {
    font-size: var(--fs-h1);
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-tighter);
    margin-bottom: 1.5rem;
}

h2 {
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    margin-bottom: 1.25rem;
}

h3 {
    font-size: var(--fs-h3);
    font-weight: var(--fw-semibold);
    margin-bottom: 1rem;
}

h4 {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    margin-bottom: 0.75rem;
}

h5 {
    font-size: var(--fs-h5);
    font-weight: var(--fw-medium);
    margin-bottom: 0.5rem;
}

h6 {
    font-size: var(--fs-h6);
    font-weight: var(--fw-medium);
    margin-bottom: 0.5rem;
}

/* Paragraphs */
p {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-relaxed);
    color: var(--text-color-secondary);
    margin-bottom: 1rem;
    max-width: 70ch;
}

/* Lead text */
.lead,
.text-lead {
    font-size: var(--fs-body-xl);
    line-height: var(--lh-relaxed);
    color: var(--text-color-secondary);
}

/* Small text */
small,
.text-sm {
    font-size: var(--fs-body-sm);
    line-height: var(--lh-normal);
}

.text-xs {
    font-size: var(--fs-body-xs);
    line-height: var(--lh-normal);
}

/* Muted text */
.text-muted {
    color: var(--text-color-muted);
}

/* Links */
a {
    color: #0071e3;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #0077ed;
}

html.dark a {
    color: #2997ff;
}

html.dark a:hover {
    color: #5ac8fa;
}

/* Code */
code,
pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

.global-nav {
    font-family: var(--font-primary);
}

.nav-links {
    font-size: var(--fs-nav);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-normal);
}

.nav-link {
    font-size: var(--fs-nav);
    font-weight: var(--fw-medium);
    letter-spacing: 0.01em;
    transition: color 0.2s ease, opacity 0.2s ease;
}

/* Mobile Overlay Navigation */
.overlay-nav-link {
    font-family: var(--font-display);
    font-size: var(--fs-nav-mobile);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.01em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO & DISPLAY TEXT
   ═══════════════════════════════════════════════════════════════════════════ */

.hero-title,
.display-title {
    font-family: var(--font-display);
    font-size: var(--fs-display-xl);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tighter);
    color: var(--text-color-primary);
}

.hero-subtitle {
    font-size: var(--fs-body-xl);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    color: var(--text-color-secondary);
    max-width: 600px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

section h2 {
    font-size: var(--fs-display-md);
    font-weight: var(--fw-bold);
    text-align: center;
    margin-bottom: 2rem;
}

section p {
    font-size: var(--fs-body-lg);
    color: var(--text-color-secondary);
}

/* Section descriptions */
.section-description {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-relaxed);
    color: var(--text-color-secondary);
    max-width: 65ch;
    margin: 0 auto 2.5rem;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

.btn,
button {
    font-family: var(--font-primary);
    font-size: var(--fs-btn);
    font-weight: var(--fw-medium);
    letter-spacing: 0.01em;
}

.btn-lg {
    font-size: var(--fs-btn-lg);
}

.btn-sm {
    font-size: var(--fs-btn-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARD TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

.card-title,
.project-title {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
    color: var(--text-color-primary);
}

.card-description,
.project-description {
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--text-color-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LABELS, BADGES & TAGS  
   ═══════════════════════════════════════════════════════════════════════════ */

.label,
.badge,
.tag,
.chip {
    font-family: var(--font-primary);
    font-size: var(--fs-label);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

input,
textarea,
select {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    line-height: var(--lh-normal);
}

label {
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    color: var(--text-color-secondary);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-color-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE TYPOGRAPHY ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Mobile (< 640px) */
@media (max-width: 639px) {
    body {
        font-size: 15px;
    }

    h1 {
        margin-bottom: 1rem;
    }

    h2 {
        margin-bottom: 0.875rem;
    }

    p {
        font-size: 0.9375rem;
        line-height: 1.6;
        margin-bottom: 0.875rem;
    }

    .nav-link {
        font-size: 13px;
    }

    .overlay-nav-link {
        font-size: 18px;
    }

    section h2 {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }
}

/* Tablet (640px - 1024px) */
@media (min-width: 640px) and (max-width: 1023px) {
    body {
        font-size: 16px;
    }

    .nav-link {
        font-size: 13px;
    }

    .overlay-nav-link {
        font-size: 20px;
    }
}

/* Desktop (>= 1024px) */
@media (min-width: 1024px) {
    body {
        font-size: 16px;
    }

    .nav-link {
        font-size: 14px;
        font-weight: 400;
    }

    h1 {
        margin-bottom: 1.5rem;
    }

    p {
        font-size: 1.0625rem;
    }
}

/* Large Desktop (>= 1440px) */
@media (min-width: 1440px) {
    .nav-link {
        font-size: 14px;
    }

    p {
        font-size: 1.125rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Font weights */
.fw-light {
    font-weight: var(--fw-light);
}

.fw-regular {
    font-weight: var(--fw-regular);
}

.fw-medium {
    font-weight: var(--fw-medium);
}

.fw-semibold {
    font-weight: var(--fw-semibold);
}

.fw-bold {
    font-weight: var(--fw-bold);
}

.fw-extrabold {
    font-weight: var(--fw-extrabold);
}

/* Font sizes */
.fs-xs {
    font-size: var(--fs-body-xs);
}

.fs-sm {
    font-size: var(--fs-body-sm);
}

.fs-base {
    font-size: var(--fs-body);
}

.fs-lg {
    font-size: var(--fs-body-lg);
}

.fs-xl {
    font-size: var(--fs-body-xl);
}

/* Line heights */
.lh-tight {
    line-height: var(--lh-tight);
}

.lh-snug {
    line-height: var(--lh-snug);
}

.lh-normal {
    line-height: var(--lh-normal);
}

.lh-relaxed {
    line-height: var(--lh-relaxed);
}

.lh-loose {
    line-height: var(--lh-loose);
}

/* Text colors */
.text-primary {
    color: var(--text-color-primary);
}

.text-secondary {
    color: var(--text-color-secondary);
}

.text-tertiary {
    color: var(--text-color-tertiary);
}