/**
 * Connect5 - Optimized Typography System
 * Designed for B2B Manufacturing Website
 * 
 * Target Audience: Business professionals, procurement managers
 * Brand Values: Professional, trustworthy, detail-oriented, innovative
 * Accessibility: WCAG AA compliant, optimized for readability
 */

:root {
    /* ==========================================================================
       FONT FAMILIES
       ========================================================================== */
    
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-secondary: 'Inter', system-ui, sans-serif; /* For headings - same family for consistency */
    --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    
    /* ==========================================================================
       BASE TYPOGRAPHY SETTINGS
       ========================================================================== */
    
    --font-size-base: 1rem;        /* 16px - WCAG recommended base */
    --line-height-base: 1.6;       /* Optimal for B2B content readability */
    
    /* ==========================================================================
       MODULAR SCALE - 1.250 (Major Third)
       Perfect for professional B2B sites - clear hierarchy without being too dramatic
       ========================================================================== */
    
    /* Small Text Sizes */
    --font-size-2xs: 0.625rem;     /* 10px - Legal text, footnotes */
    --font-size-xs: 0.75rem;       /* 12px - Captions, labels, metadata */
    --font-size-sm: 0.875rem;      /* 14px - Small body text, form labels */
    
    /* Body Text Sizes */
    --font-size-base: 1rem;        /* 16px - Primary body text */
    --font-size-md: 1.125rem;      /* 18px - Large body text, lead paragraphs */
    --font-size-lg: 1.25rem;       /* 20px - Subheadings, important text */
    
    /* Display Text Sizes */
    --font-size-xl: 1.5rem;        /* 24px - H6, section titles */
    --font-size-2xl: 1.875rem;     /* 30px - H5, card titles */
    --font-size-3xl: 2.25rem;      /* 36px - H4, section headings */
    --font-size-4xl: 2.75rem;      /* 44px - H3, page subheadings */
    --font-size-5xl: 3.25rem;      /* 52px - H2, main headings */
    --font-size-6xl: 3.75rem;      /* 60px - H1, hero titles */
    --font-size-7xl: 4.5rem;       /* 72px - Display titles (rare use) */
    
    /* ==========================================================================
       LINE HEIGHTS
       Optimized for different text purposes
       ========================================================================== */
    
    --line-height-none: 1;         /* 1.0 - Tight spacing for large display text */
    --line-height-tight: 1.25;     /* 1.25 - Headings, titles */
    --line-height-snug: 1.375;     /* 1.375 - Subheadings */
    --line-height-normal: 1.5;     /* 1.5 - UI elements, navigation */
    --line-height-relaxed: 1.625;  /* 1.625 - Body text, paragraphs */
    --line-height-loose: 1.75;     /* 1.75 - Lead paragraphs, long-form content */
    
    /* ==========================================================================
       FONT WEIGHTS
       Inter font family supports these weights
       ========================================================================== */
    
    --font-weight-thin: 100;       /* Decorative use only */
    --font-weight-extralight: 200; /* Rare use */
    --font-weight-light: 300;      /* Subtle emphasis */
    --font-weight-normal: 400;     /* Body text default */
    --font-weight-medium: 500;     /* UI elements, labels */
    --font-weight-semibold: 600;   /* Subheadings, emphasis */
    --font-weight-bold: 700;       /* Headings, strong emphasis */
    --font-weight-extrabold: 800;  /* Display headings */
    --font-weight-black: 900;      /* Maximum emphasis (rare use) */
    
    /* ==========================================================================
       LETTER SPACING
       Optimized for readability at different sizes
       ========================================================================== */
    
    --letter-spacing-tighter: -0.05em;  /* Large headings */
    --letter-spacing-tight: -0.025em;   /* Headings */
    --letter-spacing-normal: 0em;       /* Body text default */
    --letter-spacing-wide: 0.025em;     /* UI elements, buttons */
    --letter-spacing-wider: 0.05em;     /* All-caps text */
    --letter-spacing-widest: 0.1em;     /* Spaced headings */
    
    /* ==========================================================================
       TEXT SPACING
       Consistent vertical rhythm
       ========================================================================== */
    
    --text-spacing-xs: 0.5rem;     /* 8px - Tight spacing */
    --text-spacing-sm: 0.75rem;    /* 12px - Small spacing */
    --text-spacing-base: 1rem;     /* 16px - Default paragraph spacing */
    --text-spacing-md: 1.25rem;    /* 20px - Section spacing */
    --text-spacing-lg: 1.5rem;     /* 24px - Large spacing */
    --text-spacing-xl: 2rem;       /* 32px - Extra large spacing */
    --text-spacing-2xl: 3rem;      /* 48px - Section dividers */
    
    /* ==========================================================================
       RESPONSIVE TYPOGRAPHY
       Mobile-first approach with careful scaling
       ========================================================================== */
    
    /* Mobile scaling factors */
    --mobile-scale-factor: 0.85;   /* Scale down for mobile */
    --tablet-scale-factor: 0.95;   /* Slight scale down for tablet */
}

/* ==========================================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ========================================================================== */

/* Base body text */
body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    font-weight: var(--font-weight-normal);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-neutral-700, #334155);
}

/* Heading Hierarchy */
h1, .heading-1 {
    font-family: var(--font-secondary);
    font-size: var(--font-size-6xl);
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: var(--text-spacing-lg);
    color: var(--color-neutral-900, #0f172a);
}

h2, .heading-2 {
    font-family: var(--font-secondary);
    font-size: var(--font-size-5xl);
    line-height: var(--line-height-tight);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: var(--text-spacing-md);
    color: var(--color-neutral-900, #0f172a);
}

h3, .heading-3 {
    font-family: var(--font-secondary);
    font-size: var(--font-size-4xl);
    line-height: var(--line-height-snug);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: var(--text-spacing-base);
    color: var(--color-neutral-800, #1e293b);
}

h4, .heading-4 {
    font-size: var(--font-size-3xl);
    line-height: var(--line-height-snug);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-normal);
    margin-bottom: var(--text-spacing-base);
    color: var(--color-neutral-800, #1e293b);
}

h5, .heading-5 {
    font-size: var(--font-size-2xl);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-normal);
    margin-bottom: var(--text-spacing-sm);
    color: var(--color-neutral-700, #334155);
}

h6, .heading-6 {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: var(--text-spacing-sm);
    color: var(--color-neutral-700, #334155);
}

/* ==========================================================================
   TEXT VARIANTS
   ========================================================================== */

/* Body Text Variants */
.text-body {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--text-spacing-base);
}

.text-lead {
    font-size: var(--font-size-md);
    line-height: var(--line-height-loose);
    font-weight: var(--font-weight-normal);
    color: var(--color-neutral-600, #475569);
    margin-bottom: var(--text-spacing-lg);
}

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

.text-small {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--color-neutral-600, #475569);
}

.text-caption {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
    color: var(--color-neutral-500, #64748b);
    letter-spacing: var(--letter-spacing-wide);
}

.text-overline {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--color-neutral-500, #64748b);
}

/* ==========================================================================
   SPECIALIZED TEXT CLASSES
   ========================================================================== */

/* Display text for heroes and landing pages */
.text-display {
    font-size: var(--font-size-7xl);
    line-height: var(--line-height-none);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: var(--letter-spacing-tighter);
}

/* Monospace text for code, technical specifications */
.text-mono {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

/* Quote text */
blockquote, .text-quote {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-loose);
    font-style: italic;
    font-weight: var(--font-weight-normal);
    border-left: 4px solid var(--color-primary, #3b82f6);
    padding-left: var(--text-spacing-base);
    margin: var(--text-spacing-xl) 0;
    color: var(--color-neutral-600, #475569);
}

/* ==========================================================================
   LINK STYLES
   ========================================================================== */

a {
    color: var(--color-primary, #3b82f6);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--color-primary-dark, #1d4ed8);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--color-primary, #3b82f6);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================================
   LIST STYLES
   ========================================================================== */

ul, ol {
    margin-bottom: var(--text-spacing-base);
    padding-left: var(--text-spacing-lg);
}

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

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

/* Tablet adjustments */
@media (max-width: 1024px) {
    :root {
        --font-size-6xl: calc(3.75rem * var(--tablet-scale-factor));
        --font-size-5xl: calc(3.25rem * var(--tablet-scale-factor));
        --font-size-4xl: calc(2.75rem * var(--tablet-scale-factor));
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    :root {
        /* Scale down display sizes for mobile */
        --font-size-7xl: 3.5rem;   /* 56px */
        --font-size-6xl: 2.5rem;   /* 40px */
        --font-size-5xl: 2.125rem; /* 34px */
        --font-size-4xl: 1.875rem; /* 30px */
        --font-size-3xl: 1.5rem;   /* 24px */
        --font-size-2xl: 1.375rem; /* 22px */
        --font-size-xl: 1.25rem;   /* 20px */
    }
    
    /* Adjust line heights for smaller screens */
    h1, .heading-1,
    h2, .heading-2 {
        line-height: var(--line-height-snug);
    }
    
    /* Reduce spacing on mobile */
    h1, .heading-1 {
        margin-bottom: var(--text-spacing-base);
    }
    
    h2, .heading-2 {
        margin-bottom: var(--text-spacing-sm);
    }
}

/* Very small screens */
@media (max-width: 480px) {
    body {
        font-size: var(--font-size-sm);
    }
    
    .text-lead {
        font-size: var(--font-size-base);
    }
}

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

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