/* =========================================
   TYPOGRAPHY.CSS - Typography System
   ========================================= */

/* ===== BASE TYPOGRAPHY ===== */

body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: var(--weight-regular);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

h1 {
    font-size: var(--text-h1);
}

h2 {
    font-size: var(--text-h2);
}

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

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

/* ===== PARAGRAPHS ===== */

p {
    margin-bottom: var(--space-md);
    max-width: var(--text-max);
}

p:last-child {
    margin-bottom: 0;
}

.text-large {
    font-size: var(--text-body-lg);
    line-height: var(--lh-relaxed);
    font-weight: var(--weight-regular);
}

.text-small {
    font-size: var(--text-small);
}

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

/* ===== TEXT MODIFIERS ===== */

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

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

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

em {
    font-style: italic;
}

.font-display {
    font-family: var(--font-display);
}

.font-mono {
    font-family: var(--font-mono);
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--accent-blue);
}

/* ===== SPECIALIZED TEXT STYLES ===== */

/* Hero Title */
.hero__title {
    font-family: var(--font-display);
    font-size: var(--text-hero);
    font-weight: var(--weight-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--text-primary);
}

.hero__title .line {
    display: block;
}

.hero__title .accent {
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero Tag */
.hero__tag {
    font-family: var(--font-display);
    font-size: clamp(0.875rem, 2vw, 1rem);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Hero Claim */
.hero__claim {
    font-size: var(--text-body-lg);
    font-weight: var(--weight-light);
    line-height: var(--lh-relaxed);
    color: var(--text-secondary);
    max-width: 600px;
}

/* Section Title */
.section-title {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: var(--weight-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    margin-bottom: var(--space-md);
}

/* Section Subtitle */
.section-subtitle {
    font-size: var(--text-body-lg);
    font-weight: var(--weight-light);
    color: var(--text-secondary);
    line-height: var(--lh-relaxed);
    max-width: 800px;
    margin: 0 auto;
}

/* Statement Text */
.statement__text {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.75rem);
    font-weight: var(--weight-medium);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--text-primary);
}

.statement__text .highlight {
    color: var(--accent-blue);
    font-weight: var(--weight-semibold);
}

/* Product Card Typography */
.product-card__name {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    line-height: var(--lh-tight);
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-lg);
}

.product-card__tagline {
    font-size: var(--text-body-lg);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    line-height: var(--lh-snug);
    margin-bottom: var(--space-md);
}

.product-card__description {
    font-size: var(--text-body);
    font-weight: var(--weight-light);
    color: var(--text-secondary);
    line-height: var(--lh-relaxed);
    margin-bottom: 0;
}

/* Value Item Typography */
.value-title {
    font-family: var(--font-display);
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-xs);
}

.value-description {
    font-size: var(--text-body);
    font-weight: var(--weight-light);
    color: var(--text-secondary);
    line-height: var(--lh-relaxed);
}

/* Contact Typography */
.contact-item .label {
    font-size: var(--text-small);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--text-tertiary);
}

.contact-item .value {
    font-size: var(--text-body-lg);
    font-weight: var(--weight-regular);
    color: var(--text-primary);
}

/* Stats Typography */
.stat-number {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: var(--weight-bold);
    line-height: 1;
    background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size: var(--text-small);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
}

/* Footer Typography */
.footer__title {
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-sm);
}

/* Modal Typography */
.modal h2 {
    font-size: var(--text-h3);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-lg);
}

.modal h3 {
    font-size: var(--text-h4);
    font-weight: var(--weight-semibold);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
    color: var(--accent-blue);
}

.modal p {
    color: var(--text-secondary);
    line-height: var(--lh-loose);
    margin-bottom: var(--space-md);
    font-weight: var(--weight-light);
}

.modal ul {
    margin-left: var(--space-lg);
    margin-bottom: var(--space-md);
}

.modal li {
    position: relative;
    padding-left: var(--space-md);
    margin-bottom: var(--space-xs);
    color: var(--text-secondary);
    font-weight: var(--weight-light);
}

.modal li::before {
    content: '▹';
    position: absolute;
    left: 0;
    color: var(--accent-blue);
}

/* ===== RESPONSIVE TYPOGRAPHY ===== */

@media (max-width: 768px) {
    body {
        font-size: 1rem;
    }
    
    .hero__tag {
        font-size: 0.875rem;
        letter-spacing: 0.1em;
    }
    
    .statement__text {
        font-size: clamp(1.25rem, 5vw, 2rem);
    }
    
    .text-large {
        font-size: 1.125rem;
    }
}

@media (max-width: 480px) {
    .hero__tag {
        font-size: 0.75rem;
    }
    
    .stat-number {
        font-size: clamp(2rem, 8vw, 3rem);
    }
}

/* ===== PRINT STYLES ===== */

@media print {
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: black;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        color: black;
    }
    
    p {
        orphans: 3;
        widows: 3;
    }
}