/* ========================================
   METRICVISION TYPOGRAPHY SYSTEM
   ======================================== */

/* ========================================
   HEADLINE HIERARCHY
   ======================================== */

/* Hero Headlines - Largest */
.headline-hero {
    font-size: 3.5rem; /* text-6xl - increased from text-4xl */
    font-weight: 700;
    margin-bottom: 1.5rem; /* mb-6 */
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: -0.025em;
}

/* Main Section Headlines */
.headline-main {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700;
    margin-bottom: 1.5rem; /* mb-6 */
    color: var(--text-primary);
    line-height: 1.2;
}

/* Section Headlines */
.headline-section {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700;
    margin-bottom: 1rem; /* mb-4 */
    text-align: center; /* text-center */
    color: var(--text-primary);
    line-height: 1.3;
}

/* Subsection Headlines */
.headline-subsection {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    margin-bottom: 1rem; /* mb-4 */
    color: var(--text-primary);
    line-height: 1.4;
}

/* Card/Component Headlines */
.headline-card {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.5rem; /* mb-2 */
    color: var(--text-primary);
    line-height: 1.4;
}

/* Small Headlines */
.headline-small {
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.75rem; /* mb-3 */
    color: var(--text-primary);
    line-height: 1.4;
}

/* ========================================
   BODY TEXT HIERARCHY
   ======================================== */

/* Large Body Text */
.text-large {
    font-size: 1.125rem; /* text-lg */
    margin-bottom: 1.5rem; /* mb-6 */
    color: var(--text-primary);
    line-height: 1.6;
}

/* Standard Body Text */
.text-body {
    font-size: 1rem; /* text-base */
    margin-bottom: 1rem; /* mb-4 */
    color: var(--text-dark);
    line-height: 1.6;
}

.text-body strong {
    font-weight: 700;
    color: var(--text-dark);
}

/* Small Body Text */
.text-small {
    font-size: 0.875rem; /* text-sm */
    margin-bottom: 0.75rem; /* mb-3 */
    color: var(--text-muted);
    line-height: 1.5;
}

/* ========================================
   SUBTITLE STYLES
   ======================================== */

/* Main Subtitles */
.subtitle-main {
    font-size: 1.125rem; /* text-lg */
    margin-bottom: 3rem; /* mb-12 */
    text-align: center; /* text-center */
    max-width: 42rem; /* max-w-2xl */
    margin-left: auto; /* mx-auto */
    margin-right: auto; /* mx-auto */
    color: var(--text-primary);
    line-height: 1.6;
}

/* Section Subtitles */
.subtitle-section {
    font-size: 1.125rem; /* text-lg */
    margin-bottom: 1.5rem; /* mb-6 */
    max-width: 48rem; /* max-w-3xl */
    margin-left: auto; /* mx-auto */
    margin-right: auto; /* mx-auto */
    color: var(--text-primary);
    line-height: 1.6;
}

/* ========================================
   LINK STYLES
   ======================================== */

/* Primary Links */
.link-primary {
    font-weight: 600; /* font-semibold */
    transition: color 0.15s ease-in-out; /* transition-colors */
    color: var(--text-secondary);
}

.link-primary:hover {
    color: var(--primary-700);
    text-decoration: underline;
}

/* Secondary Links */
.link-secondary {
    transition: color 0.15s ease-in-out; /* transition-colors */
    color: var(--text-secondary);
}

.link-secondary:hover {
    color: var(--primary-600);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Text Alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Font Weights */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* Text Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-inverse { color: var(--text-inverse); }

/* ========================================
   RESPONSIVE TYPOGRAPHY
   ======================================== */

/* Mobile-first responsive text sizes */
@media (max-width: 640px) {
    .headline-hero {
        font-size: 2.5rem; /* text-4xl - increased from text-3xl */
        font-weight: 700;
        margin-bottom: 1rem; /* mb-4 */
    }

    .headline-main {
        font-size: 1.5rem; /* text-2xl */
        font-weight: 700;
        margin-bottom: 1rem; /* mb-4 */
    }

    .headline-section {
        font-size: 1.5rem; /* text-2xl */
        font-weight: 700;
        margin-bottom: 0.75rem; /* mb-3 */
    }

    .headline-subsection {
        font-size: 1.125rem; /* text-lg */
        font-weight: 600; /* font-semibold */
        margin-bottom: 0.75rem; /* mb-3 */
    }
}

@media (min-width: 768px) {
    .headline-hero {
        font-size: 4rem; /* text-6xl - increased from text-5xl */
        font-weight: 700;
        margin-bottom: 1.5rem; /* mb-6 */
    }

    .headline-main {
        font-size: 2.25rem; /* text-4xl */
        font-weight: 700;
        margin-bottom: 1.5rem; /* mb-6 */
    }
}

@media (min-width: 1024px) {
    .headline-hero {
        font-size: 5rem; /* text-8xl - increased from text-6xl */
        font-weight: 700;
        margin-bottom: 2rem; /* mb-8 */
    }

    .headline-main {
        font-size: 3rem; /* text-5xl */
        font-weight: 700;
        margin-bottom: 2rem; /* mb-8 */
    }
}

/* ========================================
   LEGACY COMPATIBILITY
   ======================================== */

/* Maintain compatibility with existing classes */
/* Homepage band headings (Services, Projects, Team, ÔÇª) ÔÇö real heading scale */
.section-title {
    font-size: clamp(1.875rem, 2.5vw + 1rem, 3.05rem);
    font-weight: 700;
    margin-bottom: clamp(1.125rem, 1.75vw, 1.75rem);
    text-align: center;
    color: var(--text-primary);
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.section-subtitle {
    font-size: 1.125rem; /* text-lg */
    margin-bottom: 3rem; /* mb-12 */
    text-align: center; /* text-center */
    max-width: 42rem; /* max-w-2xl */
    margin-left: auto; /* mx-auto */
    margin-right: auto; /* mx-auto */
    color: var(--text-primary);
    line-height: 1.6;
}

/* ========================================
   TEAM SECTION OVERRIDES
   ======================================== */

/* Founding-member cards: name, degree line, role */
.team-member-name {
    font-size: 1.4rem; /* slightly above text-xl */
    font-weight: 700;
    margin-bottom: 0;
    color: var(--text-primary);
    line-height: 1.3;
}

.team-member-degree {
    font-size: 0.875rem; /* one step up from former text-xs */
    line-height: 1.4;
}

.team-member-role {
    font-size: 1rem; /* slightly above former text-sm */
    font-weight: 600;
    line-height: 1.45;
    color: var(--primary);
}

