/* ======================================================
   GLOBAL TYPOGRAPHY SYSTEM
   Student Cycle
====================================================== */

:root {
    /* Font Families */
    --font-primary: 'Open Sans', sans-serif;
    --font-heading: 'Poppins', sans-serif;

    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Type Scale - Complete range from smallest to largest */
    --font-2xs: 0.625rem;            /* 10px */
    --font-xs: 0.75rem;              /* 12px */
    --font-sm: 0.875rem;             /* 14px */
    --font-base: 1rem;               /* 16px */
    --font-md: 1.125rem;             /* 18px */
    --font-lg: 1.25rem;              /* 20px */
    --font-xl: 1.5rem;               /* 24px */
    --font-2xl: 1.75rem;             /* 28px */
    --font-3xl: 2rem;                /* 32px */
    --font-4xl: 2.25rem;             /* 36px */
    --font-5xl: 2.5rem;              /* 40px */
    --font-6xl: 2.75rem;             /* 44px */
    --font-7xl: 3rem;                /* 48px */
    
    /* Responsive Type Scale (clamp for fluid typography) */
    --font-hero-eyebrow: clamp(0.625rem, 2vw, 0.75rem);
    --font-hero-title: clamp(1.5rem, 4vw, 2.5rem);
    --font-hero-text: clamp(0.75rem, 2.5vw, 1rem);
    --font-section-title: clamp(1.25rem, 3vw, 1.75rem);
    --font-section-text: clamp(0.75rem, 2vw, 0.875rem);

    /* Line Heights */
    --line-none: 1;
    --line-tight: 1.2;
    --line-snug: 1.35;
    --line-normal: 1.5;
    --line-relaxed: 1.65;
    --line-loose: 1.8;

    /* Letter Spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.1em;

    /* Spacing for typography */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
}

/* ==========================================
   BASE HTML & BODY
========================================== */

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-relaxed);
    color: var(--color-text);
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================
   HEADINGS
========================================== */

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    color: var(--color-black);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: var(--space-lg);
    line-height: var(--line-tight);
}

h1 {
    font-size: var(--font-3xl);
}

h2 {
    font-size: var(--font-2xl);
}

h3 {
    font-size: var(--font-xl);
}

h4 {
    font-size: var(--font-lg);
}

h5 {
    font-size: var(--font-md);
}

h6 {
    font-size: var(--font-base);
}

/* ==========================================
   PARAGRAPHS & BODY TEXT
========================================== */

p {
    margin-top: 0;
    margin-bottom: var(--space-lg);
    font-size: var(--font-base);
    line-height: var(--line-relaxed);
}

small {
    font-size: var(--font-sm);
    line-height: var(--line-normal);
}

strong, b {
    font-weight: var(--font-weight-semibold);
}

em, i {
    font-style: italic;
}

/* ==========================================
   HERO SPECIFIC TYPOGRAPHY
========================================== */

.hero-eyebrow {
    display: inline-block;
    font-size: var(--font-hero-eyebrow);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--color-primary-light);
    margin-bottom: var(--space-sm);
    line-height: var(--line-none);
}

.hero-title {
    font-size: var(--font-hero-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-tight);
    margin-bottom: var(--space-md);
    color: var(--color-white);
}

.hero-text {
    font-size: var(--font-hero-text);
    line-height: var(--line-snug);
    margin-bottom: var(--space-xl);
    color: var(--color-white);
    opacity: 0.9;
    max-width: 550px;
}

/* ==========================================
   LINKS
========================================== */

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease;
}

a:hover,
a:focus {
    color: var(--color-primary);
    text-decoration: none;
}

/* ==========================================
   LISTS
========================================== */

ul, ol {
    margin-top: 0;
    margin-bottom: var(--space-xl);
    padding-left: var(--space-xl);
}

li {
    margin-bottom: var(--space-xs);
    line-height: var(--line-relaxed);
}

/* ==========================================
   MEDIA
========================================== */

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* ==========================================
   UTILITY TEXT CLASSES
========================================== */

/* Font Sizes */
.text-2xs {
    font-size: var(--font-2xs);
    line-height: var(--line-normal);
}

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

.text-sm {
    font-size: var(--font-sm);
    line-height: var(--line-relaxed);
}

.text-base {
    font-size: var(--font-base);
    line-height: var(--line-relaxed);
}

.text-md {
    font-size: var(--font-md);
    line-height: var(--line-relaxed);
}

.text-lg {
    font-size: var(--font-lg);
    line-height: var(--line-snug);
}

.text-xl {
    font-size: var(--font-xl);
    line-height: var(--line-tight);
}

.text-2xl {
    font-size: var(--font-2xl);
    line-height: var(--line-tight);
}

.text-3xl {
    font-size: var(--font-3xl);
    line-height: var(--line-tight);
}

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

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

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

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

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

/* Line Heights */
.line-none {
    line-height: var(--line-none);
}

.line-tight {
    line-height: var(--line-tight);
}

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

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

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

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

/* Letter Spacing */
.tracking-tight {
    letter-spacing: var(--letter-spacing-tight);
}

.tracking-normal {
    letter-spacing: var(--letter-spacing-normal);
}

.tracking-wide {
    letter-spacing: var(--letter-spacing-wide);
}

.tracking-wider {
    letter-spacing: var(--letter-spacing-wider);
}

/* Text Transforms */
.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

/* Text Align */
.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/* Text Colors */
.text-muted {
    color: var(--color-text-light);
}

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

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

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

/* ==========================================
   SECTION TYPOGRAPHY PATTERNS
========================================== */

.section-eyebrow {
    display: inline-block;
    font-size: var(--font-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
    line-height: var(--line-none);
}

.section-title {
    font-size: var(--font-section-title);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-tight);
    margin-bottom: var(--space-md);
    color: var(--color-black);
}

.section-text {
    font-size: var(--font-section-text);
    line-height: var(--line-relaxed);
    color: var(--color-text-light);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================
   CARD TYPOGRAPHY
========================================== */

.card-title {
    font-size: var(--font-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-snug);
    margin-bottom: var(--space-sm);
}

.card-text {
    font-size: var(--font-sm);
    line-height: var(--line-relaxed);
    color: var(--color-text-light);
}

/* ==========================================
   FOOTER TYPOGRAPHY
========================================== */

.footer-heading {
    font-size: var(--font-base);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: var(--space-lg);
    color: var(--color-white);
}

.footer-link {
    font-size: var(--font-sm);
    line-height: var(--line-relaxed);
}

/* ==========================================
   RESPONSIVE BREAKPOINTS
========================================== */

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    body {
        font-size: var(--font-sm);
    }
    
    h1 {
        font-size: var(--font-2xl);
    }
    
    h2 {
        font-size: var(--font-xl);
    }
    
    h3 {
        font-size: var(--font-lg);
    }
    
    .section-title {
        margin-bottom: var(--space-sm);
    }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
    body {
        font-size: var(--font-sm);
    }
    
    h1 {
        font-size: var(--font-xl);
        margin-bottom: var(--space-sm);
    }
    
    h2 {
        font-size: var(--font-lg);
        margin-bottom: var(--space-sm);
    }
    
    h3 {
        font-size: var(--font-md);
    }
    
    p {
        margin-bottom: var(--space-md);
    }
    
    .hero-eyebrow {
        margin-bottom: var(--space-2xs);
    }
    
    .hero-title {
        margin-bottom: var(--space-sm);
    }
    
    .hero-text {
        margin-bottom: var(--space-lg);
    }
    
    .section-eyebrow {
        margin-bottom: var(--space-2xs);
    }
    
    .section-title {
        margin-bottom: var(--space-sm);
    }
}

/* Small Mobile (up to 480px) */
@media (max-width: 480px) {
    body {
        font-size: var(--font-xs);
    }
    
    h1 {
        font-size: var(--font-lg);
    }
    
    h2 {
        font-size: var(--font-md);
    }
    
    .hero-text {
        line-height: var(--line-normal);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}