/**
 * Enterprise Typography System v3.0 * * Inspired by: Infosys,
 Accenture,
 Deloitte * Design Language: Corporate • Premium • Professional * * Font Stack: Inter (primary) with Myriad Pro / Helvetica Neue fallbacks * Features: Fluid typography,
 tight letter-spacing for headlines,
 * optimal readability for body text
 */

/* =============================================================================
   1. Font Imports - Enterprise Corporate Stack
   ============================================================================= */

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

/* =============================================================================
   2. Typography Design Tokens - Infosys-Inspired
   ============================================================================= */

:root {
    /* ═══════════════════════════════════════════════════════════════════════════
    FONT FAMILIES - Corporate Enterprise Stack (Myriad Pro style) ═══════════════════════════════════════════════════════════════════════════ */
    --font-heading: 'Inter', 'Myriad Pro', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
        --font-body: 'Inter', 'Myriad Pro', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
        --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace;
    
    /* ═══════════════════════════════════════════════════════════════════════════
    FLUID TYPE SCALE - Enterprise Grade (Infosys-inspired) Hero: 64px–72px | Section: 36px–42px | Sub: 22px–26px | Body: 16px–18px Min viewport: 375px | Max viewport: 1440px ═══════════════════════════════════════════════════════════════════════════ */
    
    /* Display - Hero Headlines (64px - 72px range) */
        --type-display-xl: clamp(3rem, 4vw + 1.5rem, 4.5rem);
        /* 48px → 72px */
        --type-display: clamp(2.5rem, 3.5vw + 1.25rem, 4rem);
        /* 40px → 64px */
        --type-display-sm: clamp(2rem, 3vw + 1rem, 3rem);
        /* 32px → 48px */
    
    /* Section Headings (36px - 42px range) */
        --type-h1: clamp(2.25rem, 2.5vw + 1rem, 2.625rem);
        /* 36px → 42px */
        --type-h2: clamp(1.75rem, 2vw + 0.75rem, 2.25rem);
        /* 28px → 36px */
        --type-h3: clamp(1.375rem, 1.5vw + 0.625rem, 1.625rem);
        /* 22px → 26px */
        --type-h4: clamp(1.125rem, 1vw + 0.5rem, 1.375rem);
        /* 18px → 22px */
        --type-h5: clamp(1rem, 0.75vw + 0.5rem, 1.125rem);
        /* 16px → 18px */
        --type-h6: clamp(0.875rem, 0.5vw + 0.5rem, 1rem);
        /* 14px → 16px */
    
    /* Body Text (16px - 18px range) */
        --type-body-xl: clamp(1.125rem, 0.5vw + 0.875rem, 1.25rem);
        /* 18px → 20px */
        --type-body-lg: clamp(1rem, 0.375vw + 0.875rem, 1.125rem);
        /* 16px → 18px */
        --type-body: 1rem;
        /* 16px base */
        --type-body-sm: 0.9375rem;
        /* 15px */
        --type-small: 0.875rem;
        /* 14px */
        --type-xs: 0.8125rem;
        /* 13px */
        --type-tiny: 0.75rem;
        /* 12px */
        --type-micro: 0.6875rem;
        /* 11px */
    /* Legacy mappings for backward compatibility */
    --fs-hero: var(--type-display);
        --fs-h1: var(--type-h1);
        --fs-h2: var(--type-h2);
        --fs-h3: var(--type-h3);
        --fs-h4: var(--type-h4);
        --fs-body: var(--type-body);
        --fs-body-sm: var(--type-body-sm);
        --fs-small: var(--type-small);
        --fs-xs: var(--type-xs);
        --fs-tiny: var(--type-tiny);

    /* ═══════════════════════════════════════════════════════════════════════════
    FONT WEIGHTS - Enterprise Hierarchy (Bold headers, readable body) ═══════════════════════════════════════════════════════════════════════════ */ --weight-light: 300;
        --weight-regular: 400;
    --weight-medium: 500;
        --weight-semibold: 600;
        --weight-bold: 700;
        --weight-extrabold: 800;
    --weight-black: 900;
/* Legacy mappings */
    --fw-light: var(--weight-light);
    --fw-regular: var(--weight-regular);
    --fw-medium: var(--weight-medium);
    --fw-semibold: var(--weight-semibold);
    --fw-bold: var(--weight-bold);
    --fw-black: var(--weight-black);
    
        /* ═══════════════════════════════════════════════════════════════════════════
    LINE HEIGHTS - Enterprise Readability (1.5 - 1.7 range) ═══════════════════════════════════════════════════════════════════════════ */ --leading-none: 1;
    --leading-tight: 1.1;
        /* Hero headlines */
        --leading-snug: 1.2;
        /* Section headings */
        --leading-normal: 1.4;
        /* Subheadings */
        --leading-relaxed: 1.6;
        /* Body text - optimal readability */
        --leading-loose: 1.75;
        /* Long-form content */
    
        /* Legacy mappings */
        --lh-tight: var(--leading-tight);
        --lh-heading: var(--leading-snug);
        --lh-body: var(--leading-relaxed);
        --lh-relaxed: var(--leading-loose);
    
        /* ═══════════════════════════════════════════════════════════════════════════
    LETTER SPACING - Tight Headlines,
        Natural Body (Infosys Style) ═══════════════════════════════════════════════════════════════════════════ */
    --tracking-tighter: -0.05em;
        /* Hero headlines - very tight */
        --tracking-tight: -0.03em;
        /* Section headings - tight */
        --tracking-normal: -0.01em;
        /* Subheadings - slightly tight */
        --tracking-wide: 0.01em;
        /* Body text - natural */
        --tracking-wider: 0.05em;
        /* Small text emphasis */
        --tracking-widest: 0.1em;
        /* Labels, overlines */
        --tracking-caps: 0.15em;
        /* All-caps text */
    
        /* Legacy mappings */
        --ls-tight: var(--tracking-tight);
        --ls-normal: var(--tracking-normal);
        --ls-wide: var(--tracking-wide);
        --ls-wider: var(--tracking-wider);
        --ls-caps: var(--tracking-caps);
    
        /* ═══════════════════════════════════════════════════════════════════════════
           TEXT COLORS - Semantic Hierarchy
           ═══════════════════════════════════════════════════════════════════════════ */
        --text-heading: #0a0a0a;
        --text-primary: #1a1a2e;
        --text-secondary: #4a5568;
        --text-tertiary: #718096;
        --text-muted: #a0aec0;
        --text-subtle: #cbd5e0;
        --text-inverse: #ffffff;
        --text-brand: #e60012;
    
        /* ═══════════════════════════════════════════════════════════════════════════
           PARAGRAPH SPACING
           ═══════════════════════════════════════════════════════════════════════════ */
        --paragraph-spacing: 1.5em;
        --paragraph-indent: 0;
}

/* =============================================================================
   3. Base Typography Styles
   ============================================================================= */

html {
    font-size: 100%;
        /* 16px base */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

body {
    font-family: var(--font-body);
    font-size: var(--type-body);
        font-weight: var(--weight-regular);
        line-height: var(--leading-relaxed);
        letter-spacing: var(--tracking-normal);
        color: var(--text-primary);
}

/* =============================================================================
   4. Headings - Premium Hierarchy
   ============================================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
        line-height: var(--leading-snug);
        letter-spacing: var(--tracking-tight);
        color: var(--text-heading);
        margin-top: 0;
        margin-bottom: 0.5em;
        text-wrap: balance;
}

/* Display Headlines - For Hero Sections */
.display-xl {
    font-size: var(--type-display-xl);
    font-weight: var(--weight-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #2d3748 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.display {
    font-size: var(--type-display);
    font-weight: var(--weight-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
}

/* Hero Heading - Page Hero Title */
.hero-title,
.hero-modern-title,
h1.hero {
    font-family: var(--font-heading);
        font-size: var(--type-display);
        font-weight: var(--weight-extrabold);
        line-height: var(--leading-tight);
        letter-spacing: var(--tracking-tighter);
        color: var(--text-heading);
        text-wrap: balance;
        margin-bottom: 1.5rem;
}

/* H1 - Page Title */
h1,
.h1 {
    font-size: var(--type-h1);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

/* H2 - Section Heading */
h2,
.h2 {
    font-size: var(--type-h2);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

/* H3 - Subsection Heading */
h3,
.h3 {
    font-size: var(--type-h3);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
}

/* H4 - Card/Component Title */
h4,
.h4 {
    font-size: var(--type-h4);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
}

/* H5 - Small Heading */
h5,
.h5 {
    font-size: var(--type-h5);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
}

/* H6 - Overline/Label */
h6,
.h6 {
    font-size: var(--type-h6);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* =============================================================================
   5. Body Text Variants
   ============================================================================= */

p {
    margin-top: 0;
        margin-bottom: var(--paragraph-spacing);
        color: var(--text-secondary);
        line-height: var(--leading-relaxed);
}

/* Lead Paragraph - Intro Text */
.lead,
.text-lead,
.hero-subtitle,
.hero-modern-description {
    font-family: var(--font-body);
    font-size: var(--type-body-xl);
    font-weight: var(--weight-regular);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    max-width: 600px;
}

@media (min-width: 768px) {
    .lead,
    .text-lead {
        font-size: var(--type-body-xl);
    }
}

/* Large Body */
.text-lg {
    font-size: var(--type-body-lg);
    line-height: var(--leading-relaxed);
}

/* Regular Body */
.text-body {
    font-size: var(--type-body);
    line-height: var(--leading-relaxed);
}

/* Small Body */
.text-sm {
    font-size: var(--type-body-sm);
    line-height: var(--leading-normal);
}
/* Secondary body text */
.text-secondary {
    font-size: var(--type-body-sm);
        color: var(--text-secondary);
        line-height: var(--leading-relaxed);
}

/* Small text */
.text-small {
    font-size: var(--type-small);
        line-height: var(--leading-normal);
}

/* Extra small / labels */
.text-xs {
    font-size: var(--type-xs);
        line-height: var(--leading-normal);
}

/* Tiny / captions */
.text-tiny {
    font-size: var(--type-tiny);
        line-height: var(--leading-normal);
        color: var(--text-muted);
}

/* =============================================================================
   6. Decorative Text Styles=============================================================================*/

   /* Overline - Category Label Above Heading */
   .overline {
       display: block;
       font-family: var(--font-body);
       font-size: var(--type-xs);
       font-weight: var(--weight-semibold);
       line-height: var(--leading-normal);
       letter-spacing: var(--tracking-caps);
       text-transform: uppercase;
       color: var(--text-brand);
       margin-bottom: 0.75rem;
   }

   /* Eyebrow - Subtle Category Label */
   .eyebrow {
       display: inline-block;
       font-family: var(--font-body);
       font-size: var(--type-tiny);
       font-weight: var(--weight-semibold);
       letter-spacing: var(--tracking-widest);
       text-transform: uppercase;
       color: var(--text-tertiary);
       padding: 0.25rem 0.75rem;
       background: rgba(0, 0, 0, 0.04);
       border-radius: 100px;
       margin-bottom: 1rem;
   }

   /* Kicker - Pre-heading Text */
   .kicker {
       display: block;
       font-family: var(--font-body);
       font-size: var(--type-small);
       font-weight: var(--weight-medium);
       color: var(--text-brand);
       margin-bottom: 0.5rem;
   }

   /* Caption */
   .caption {
       font-size: var(--type-xs);
       font-weight: var(--weight-regular);
       line-height: var(--leading-normal);
       color: var(--text-muted);
   }

   /* Subtitle for sections */
   .subtitle,
   .section-subtitle,
   .section-subtitle-modern {
       font-family: var(--font-body);
       font-size: var(--type-body-lg);
       font-weight: var(--weight-regular);
       line-height: var(--leading-relaxed);
       color: var(--text-secondary);
       max-width: 65ch;
   }

   /* =============================================================================
   7. Breadcrumb Typography
   ============================================================================= */

.breadcrumb {
    font-family: var(--font-body);
    font-size: var(--type-xs);
        font-weight: var(--weight-regular);
        line-height: var(--leading-normal);
        letter-spacing: var(--tracking-normal);
        color: var(--text-muted);
}

.breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb a:hover {
    color: var(--text-heading);
}

.breadcrumb-separator {
    margin: 0 0.5em;
    color: var(--text-muted);
        opacity: 0.5;
}

.breadcrumb-current {
    color: var(--text-heading);
        font-weight: var(--weight-medium);
}

/* =============================================================================
   8. Button Typography
   ============================================================================= */

.btn,
button,
input[type="submit"],
input[type="button"] {
    font-family: var(--font-body);
    font-size: var(--type-small);
        font-weight: var(--weight-semibold);
        line-height: var(--leading-normal);
        letter-spacing: var(--tracking-wide);
    text-transform: none;
}

/* Large buttons */
.btn-lg {
    font-size: var(--type-body);
        font-weight: var(--weight-semibold);
        letter-spacing: var(--tracking-normal);
}

/* Small buttons */
.btn-sm {
    font-size: var(--type-xs);
        font-weight: var(--weight-medium);
    }
    
    /* Extra small buttons */
    .btn-xs {
        font-size: var(--type-tiny);
        font-weight: var(--weight-medium);
        letter-spacing: var(--tracking-normal);
}

/* =============================================================================
   9. Form Typography
   ============================================================================= */

label {
    font-family: var(--font-body);
    font-size: var(--type-small);
        font-weight: var(--weight-medium);
        line-height: var(--leading-normal);
        color: var(--text-heading);
        margin-bottom: 0.5rem;
        display: block;
}

input,
textarea,
select {
    font-family: var(--font-body);
    font-size: var(--type-body);
        font-weight: var(--weight-regular);
        line-height: var(--leading-normal);
        color: var(--text-heading);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
        font-weight: var(--weight-regular);
    }
    
    .form-hint,
    .form-helper {
        font-size: var(--type-xs);
        color: var(--text-muted);
        margin-top: 0.25rem;
    }
    
    .form-error {
        font-size: var(--type-xs);
        color: #dc2626;
        margin-top: 0.25rem;
        font-weight: var(--weight-medium);
}

/* =============================================================================
   10. Navigation Typography
   ============================================================================= */

.nav-link {
    font-family: var(--font-body);
    font-size: var(--type-small);
        font-weight: var(--weight-medium);
        line-height: var(--leading-normal);
        letter-spacing: var(--tracking-normal);
        color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--text-heading);
    }
    
    /* Top-level navigation */
    .nav-primary .nav-link {
        font-weight: var(--weight-medium);
    }
    
    /* Secondary / footer navigation */
    .nav-secondary .nav-link {
        font-size: var(--type-xs);
        font-weight: var(--weight-regular);
}

/* =============================================================================
   11. Utility Classes
   ============================================================================= */

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

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

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

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

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

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

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

.text-dark {
    color: var(--text-heading);
}

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

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

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

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

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

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify {
    text-align: justify;
}

/* Text transforms */
.text-uppercase { 
    text-transform: uppercase; 
    letter-spacing: var(--tracking-wide);
}
.text-capitalize { text-transform: capitalize; }
.text-lowercase { text-transform: lowercase; }
.text-normal-case {
    text-transform: none;
}

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

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

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

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

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

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

/* Line heights */
.leading-none {
    line-height: 1;
}

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

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

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

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

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

/* Text wrapping */
.text-balance {
    text-wrap: balance;
}

.text-pretty {
    text-wrap: pretty;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Max width for readability */
.prose {
    max-width: 65ch;
}

.prose-sm {
    max-width: 55ch;
}

.prose-lg {
    max-width: 75ch;
}

/* =============================================================================
   12. Links
   ============================================================================= */

a {
    color: var(--text-brand);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
    opacity: 0.8;
    }
    
    /* Underline on hover */
    .link-underline {
        text-decoration: none;
        background-image: linear-gradient(currentColor, currentColor);
        background-position: 0% 100%;
        background-repeat: no-repeat;
        background-size: 0% 1px;
        transition: background-size 0.3s ease;
    }
    
    .link-underline:hover {
        background-size: 100% 1px;
}

/* Primary action link */
.link-primary {
    color: var(--text-brand);
        font-weight: var(--weight-medium);
}

.link-primary:hover {
    opacity: 0.8;
    }
    
    /* Subtle link */
    .link-subtle {
        color: var(--text-secondary);
    }
    
    .link-subtle:hover {
        color: var(--text-heading);
}

/* =============================================================================
   13. Lists
   ============================================================================= */

ul, ol {
    margin: 0 0 var(--paragraph-spacing);
    padding-left: 1.5em;
    line-height: var(--leading-relaxed);
}

li {
    margin-bottom: 0.5em;
    }
    
    li:last-child {
        margin-bottom: 0;
    }
    
    /* Clean list */
    .list-none {
        list-style: none;
        padding-left: 0;
    }
    
    /* Check list */
    .list-check li::marker {
        content: "✓ ";
        color: var(--text-brand);
}

/* =============================================================================
   14. Blockquote
   ============================================================================= */

blockquote {
    font-family: var(--font-heading);
        font-size: var(--type-body-lg);
        font-style: normal;
        font-weight: var(--weight-medium);
        line-height: var(--leading-relaxed);
        color: var(--text-secondary);
        border-left: 3px solid var(--text-brand);
        padding-left: 1.5em;
        margin: 2em 0;
    }
    
    blockquote cite {
        display: block;
        font-family: var(--font-body);
        font-size: var(--type-small);
        font-style: normal;
        font-weight: var(--weight-regular);
        color: var(--text-muted);
        margin-top: 1em;
    }
    
    blockquote cite::before {
        content: "— ";
}

/* =============================================================================
   15. Code
   ============================================================================= */

code,
pre,
kbd,
samp {
    font-family: 'SF Mono', 'Fira Code', 'Monaco', 'Consolas', 'Liberation Mono', monospace;
    font-size: 0.875em;
}

code {
    background: rgba(0, 0, 0, 0.04);
    padding: 0.2em 0.4em;
    border-radius: 4px;
        color: var(--text-heading);
}

pre {
    background: #1a1a2e;
        color: #e2e8f0;
        padding: 1.25em;
        border-radius: 8px;
        overflow-x: auto;
        line-height: var(--leading-relaxed);
    }
    
    pre code {
        background: none;
        padding: 0;
        color: inherit;
    }
    
    kbd {
        background: linear-gradient(180deg, #f5f5f5, #e5e5e5);
        border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 0.15em 0.4em;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

/* =============================================================================
   16. Section Headers
   ============================================================================= */

.section-header {
    margin-bottom: 3rem;
        text-align: center;
}

.section-header.text-left {
    text-align: left;
}

.section-title,
.section-title-modern {
    font-family: var(--font-heading);
    font-size: var(--type-h2);
        font-weight: var(--weight-bold);
        line-height: var(--leading-tight);
        letter-spacing: var(--tracking-tight);
        color: var(--text-heading);
        margin-bottom: 1rem;
        text-wrap: balance;
}

.section-subtitle {
    font-family: var(--font-body);
    font-size: var(--type-body-lg);
        font-weight: var(--weight-regular);
        line-height: var(--leading-relaxed);
        color: var(--text-secondary);
    max-width: 600px;
    margin-left: auto;
        margin-right: auto;
    }
    
    .section-header.text-left .section-subtitle {
        margin-left: 0;
        margin-right: 0;
}

@media (min-width: 768px) {
    .section-header {
        margin-bottom: 4rem;
        }
        
        .section-title {
            font-size: var(--type-h1);
        }
        }
        
        /* =============================================================================
           17. Card Typography
           ============================================================================= */
        
        .card-title {
            font-family: var(--font-heading);
            font-size: var(--type-h4);
            font-weight: var(--weight-semibold);
            line-height: var(--leading-snug);
            color: var(--text-heading);
            margin-bottom: 0.5rem;
        }
        
        .card-subtitle {
            font-size: var(--type-small);
            font-weight: var(--weight-medium);
            color: var(--text-brand);
            text-transform: uppercase;
            letter-spacing: var(--tracking-wide);
            margin-bottom: 0.75rem;
        }
        
        .card-text,
        .card-description {
            font-size: var(--type-body-sm);
            line-height: var(--leading-relaxed);
            color: var(--text-secondary);
        }
        
        .card-meta {
            font-size: var(--type-xs);
            color: var(--text-muted);
        }
        
        /* =============================================================================
           18. Badge & Tag Typography
           ============================================================================= */
        
        .badge,
        .tag {
            font-family: var(--font-body);
            font-size: var(--type-tiny);
            font-weight: var(--weight-semibold);
            line-height: 1;
            letter-spacing: var(--tracking-wide);
            text-transform: uppercase;
        }
        
        /* =============================================================================
           19. Table Typography
           ============================================================================= */
        
        table {
            font-size: var(--type-body-sm);
            line-height: var(--leading-normal);
        }
        
        th {
            font-weight: var(--weight-semibold);
            color: var(--text-heading);
            text-align: left;
        }
        
        td {
            color: var(--text-secondary);
        }
        
        /* =============================================================================
           20. Responsive Typography Adjustments
           ============================================================================= */
        
        @media (max-width: 640px) {
        
            /* Reduce spacing on mobile */
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                margin-bottom: 0.75em;
            }
        
            .lead,
            .text-lead {
                font-size: var(--type-body-lg);
            }
        
            .section-title {
                font-size: var(--type-h2);
            }
        }
        
        @media (min-width: 1024px) {
        
            /* Larger screens get more breathing room */
            .hero-title,
            .hero-modern-title {
                letter-spacing: -0.03em;
            }
        }
        
        /* =============================================================================
           21. Print Typography
           ============================================================================= */
        
        @media print {
            body {
                font-size: 12pt;
                line-height: 1.5;
                color: #000;
            }
        
            h1 {
                font-size: 24pt;
            }
        
            h2 {
                font-size: 20pt;
            }
        
            h3 {
                font-size: 16pt;
            }
        
            h4 {
                font-size: 14pt;
            }
        
            a {
                color: #000;
                text-decoration: underline;
    }
    
        code,
        pre {
            font-size: 10pt;
            background: #f0f0f0;
    }
}