/* =================================================================
   image2model Typography System
   Based on brand guidelines: Modern, Geometric, Accessible
   ================================================================= */

/* =================================================================
   Font Imports
   ================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* =================================================================
   Typography Variables
   ================================================================= */
:root {
    /* =================================================================
       Font Families
       ================================================================= */
    --font-sans: 'Karla', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, sans-serif;
    --font-mono: 'Space Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
    --font-display: 'Bebas Neue', 'Impact', 'Arial Black', sans-serif;
    
    /* =================================================================
       Font Weights
       ================================================================= */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
    
    /* =================================================================
       Font Sizes - Base Scale (16px = 1rem)
       ================================================================= */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */
    --text-6xl: 3.75rem;     /* 60px */
    --text-7xl: 4.5rem;      /* 72px */
    --text-8xl: 6rem;        /* 96px */
    --text-9xl: 8rem;        /* 128px */
    
    /* =================================================================
       Line Heights
       ================================================================= */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 1.75;
    --leading-extra: 2;
    
    /* =================================================================
       Letter Spacing
       ================================================================= */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    
    /* =================================================================
       Typography Component Styles
       ================================================================= */

    /* Display - For hero sections and marketing */
    --display-font-size: clamp(3rem, 8vw, 6rem);
    --display-line-height: var(--leading-tight);
    --display-letter-spacing: var(--tracking-tight);
    --display-font-weight: var(--font-bold);
    
    /* Headings */
    --h1-font-size: clamp(2rem, 5vw, 3rem);
    --h1-line-height: var(--leading-tight);
    --h1-letter-spacing: var(--tracking-tight);
    --h1-font-weight: var(--font-bold);
    --h2-font-size: clamp(1.5rem, 4vw, 2.25rem);
    --h2-line-height: var(--leading-snug);
    --h2-letter-spacing: var(--tracking-tight);
    --h2-font-weight: var(--font-semibold);
    --h3-font-size: clamp(1.25rem, 3vw, 1.75rem);
    --h3-line-height: var(--leading-snug);
    --h3-letter-spacing: var(--tracking-normal);
    --h3-font-weight: var(--font-semibold);
    --h4-font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    --h4-line-height: var(--leading-normal);
    --h4-letter-spacing: var(--tracking-normal);
    --h4-font-weight: var(--font-medium);
    --h5-font-size: clamp(1rem, 2vw, 1.25rem);
    --h5-line-height: var(--leading-normal);
    --h5-letter-spacing: var(--tracking-normal);
    --h5-font-weight: var(--font-medium);
    --h6-font-size: clamp(0.875rem, 1.5vw, 1.125rem);
    --h6-line-height: var(--leading-normal);
    --h6-letter-spacing: var(--tracking-wide);
    --h6-font-weight: var(--font-medium);
    
    /* Body Text */
    --body-font-size: var(--text-base);
    --body-line-height: var(--leading-relaxed);
    --body-letter-spacing: var(--tracking-normal);
    --body-font-weight: var(--font-regular);
    --body-lg-font-size: var(--text-lg);
    --body-lg-line-height: var(--leading-relaxed);
    --body-lg-letter-spacing: var(--tracking-normal);
    --body-sm-font-size: var(--text-sm);
    --body-sm-line-height: var(--leading-normal);
    --body-sm-letter-spacing: var(--tracking-normal);
    
    /* Caption/Helper Text */
    --caption-font-size: var(--text-xs);
    --caption-line-height: var(--leading-normal);
    --caption-letter-spacing: var(--tracking-wide);
    --caption-font-weight: var(--font-regular);
    
    /* Code/Monospace */
    --code-font-size: 0.875em;
    --code-line-height: var(--leading-normal);
    --code-letter-spacing: var(--tracking-normal);
    --code-font-weight: var(--font-regular);
}

/* =================================================================
   Base Typography Styles
   ================================================================= */
html {
    font-size: 16px; /* Base font size */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
}

body {
    font-family: var(--font-sans);
    font-size: var(--body-font-size);
    line-height: var(--body-line-height);
    letter-spacing: var(--body-letter-spacing);
    font-weight: var(--body-font-weight);
}

/* =================================================================
   Heading Styles
   ================================================================= */
.display {
    font-family: var(--font-display);
    font-size: var(--display-font-size);
    line-height: var(--display-line-height);
    letter-spacing: var(--display-letter-spacing);
    font-weight: var(--display-font-weight);
}

h1, .h1 {
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing);
    font-weight: var(--h1-font-weight);
}

h2, .h2 {
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing);
    font-weight: var(--h2-font-weight);
}

h3, .h3 {
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
    letter-spacing: var(--h3-letter-spacing);
    font-weight: var(--h3-font-weight);
}

h4, .h4 {
    font-size: var(--h4-font-size);
    line-height: var(--h4-line-height);
    letter-spacing: var(--h4-letter-spacing);
    font-weight: var(--h4-font-weight);
}

h5, .h5 {
    font-size: var(--h5-font-size);
    line-height: var(--h5-line-height);
    letter-spacing: var(--h5-letter-spacing);
    font-weight: var(--h5-font-weight);
}

h6, .h6 {
    font-size: var(--h6-font-size);
    line-height: var(--h6-line-height);
    letter-spacing: var(--h6-letter-spacing);
    font-weight: var(--h6-font-weight);
    text-transform: uppercase;
}

/* =================================================================
   Body Text Styles
   ================================================================= */
p {
    margin-bottom: var(--spacing-md);
    max-width: 65ch; /* Optimal reading length */
}

.lead {
    font-size: var(--body-lg-font-size);
    line-height: var(--body-lg-line-height);
    letter-spacing: var(--body-lg-letter-spacing);
    font-weight: var(--font-regular);
}

.body-sm {
    font-size: var(--body-sm-font-size);
    line-height: var(--body-sm-line-height);
    letter-spacing: var(--body-sm-letter-spacing);
}

.caption {
    font-size: var(--caption-font-size);
    line-height: var(--caption-line-height);
    letter-spacing: var(--caption-letter-spacing);
    font-weight: var(--caption-font-weight);
    color: var(--text-muted);
}

/* =================================================================
   Link Styles
   ================================================================= */
a {
    text-decoration: none;
    font-weight: var(--font-medium);
    transition: all var(--transition-fast);
}

a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

/* =================================================================
   Code Styles
   ================================================================= */
code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: var(--code-font-size);
    line-height: var(--code-line-height);
    letter-spacing: var(--code-letter-spacing);
    font-weight: var(--code-font-weight);
}

code {
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

pre {
    overflow-x: auto;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    background-color: var(--bg-tertiary);
}

pre code {
    padding: 0;
    background-color: transparent;
}

/* =================================================================
   Typography Utility Classes
   ================================================================= */

/* Font Family */
.font-sans { font-family: var(--font-sans); }

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

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

/* Font Size */
.text-xs { font-size: var(--text-xs); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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); }

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

/* 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); }

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

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

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

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

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

.lowercase { text-transform: lowercase; }

.capitalize { text-transform: capitalize; }

.normal-case { text-transform: none; }

/* Text Decoration */
.underline { text-decoration: underline; }

.line-through { text-decoration: line-through; }

.no-underline { text-decoration: none; }

/* Text Overflow */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-clip {
    text-overflow: clip;
}

.text-ellipsis {
    text-overflow: ellipsis;
}

/* =================================================================
   Responsive Typography
   ================================================================= */
@media (width <= 768px) {
    html {
        font-size: 15px; /* Slightly smaller base on mobile */
    }
    
    p {
        max-width: 100%; /* Full width on mobile */
    }
}

@media (width <= 480px) {
    html {
        font-size: 14px; /* Even smaller on very small screens */
    }
}

/* =================================================================
   Print Styles
   ================================================================= */
@media print {
    body {
        font-family: Georgia, serif;
        font-size: 12pt;
        line-height: 1.5;
    }
    
    h1, h2, h3, h4, h5, h6 {
        break-after: avoid;
        font-family: var(--font-sans);
    }
    
    p {
        orphans: 3;
        widows: 3;
    }
}

/* =================================================================
   Accessibility Features
   ================================================================= */

/* Focus styles for better keyboard navigation */
:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: more) {
    body {
        font-weight: var(--font-medium);
        letter-spacing: 0.02em;
    }
}