/* ===========================================
   Global Typography System
   =========================================== */
:root {
    /* Font Families */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    --font-secondary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    
    /* Base Font Size (1rem = 16px) */
    --font-size-base: 1rem;
    
    /* Type Scale (Major Third: 1.25) */
    --font-size-xs: 0.8rem;      /* 12.8px */
    --font-size-sm: 0.889rem;    /* 14.22px */
    --font-size-md: 1rem;        /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.266rem;    /* 20.25px */
    --font-size-2xl: 1.424rem;   /* 22.78px */
    --font-size-3xl: 1.602rem;   /* 25.63px */
    --font-size-4xl: 1.802rem;   /* 28.83px */
    --font-size-5xl: 2.027rem;   /* 32.44px */
    --font-size-6xl: 2.281rem;   /* 36.5px */
    --font-size-7xl: 2.566rem;   /* 41.06px */
    --font-size-8xl: 2.887rem;   /* 46.19px */
    
    /* Line Heights */
    --line-height-none: 1;
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
    
    /* Letter Spacing */
    --letter-spacing-tighter: -0.05em;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;
    
    /* Text Colors */
    --text-primary: #1a202c;    /* Dark gray/black for primary text */
    --text-secondary: #4a5568;  /* Medium gray for secondary text */
    --text-muted: #718096;     /* Light gray for muted/disabled text */
    --text-inverse: #ffffff;   /* White text for dark backgrounds */
    --text-accent: #3182ce;    /* Blue accent color for links and highlights */
    --text-success: #38a169;   /* Green for success messages */
    --text-warning: #d69e2e;   /* Yellow for warnings */
    --text-danger: #e53e3e;    /* Red for errors/danger */
    
    /* Typography Scale */
    --h1-size: var(--font-size-7xl);
    --h2-size: var(--font-size-6xl);
    --h3-size: var(--font-size-5xl);
    --h4-size: var(--font-size-4xl);
    --h5-size: var(--font-size-3xl);
    --h6-size: var(--font-size-2xl);
}

/* Base Typography */
body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin: 2.5rem 0 1.25rem;
    color: var(--text-primary);
}

h1, .h1 {
    font-size: var(--h1-size);
    font-weight: var(--font-weight-extra-bold);
    line-height: 1.1;
    margin: 0 0 1.5rem;
}

h2, .h2 {
    font-size: var(--h2-size);
    font-weight: var(--font-weight-bold);
    margin: 3rem 0 1.25rem;
}

h3, .h3 {
    font-size: var(--h3-size);
    font-weight: var(--font-weight-semi-bold);
    margin: 2.5rem 0 1rem;
}

h4, .h4 {
    font-size: var(--h4-size);
    font-weight: var(--font-weight-semi-bold);
    margin: 2rem 0 0.875rem;
}

h5, .h5 {
    font-size: var(--h5-size);
    font-weight: var(--font-weight-semi-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    margin: 1.75rem 0 0.75rem;
}

h6, .h6 {
    font-size: var(--h6-size);
    font-weight: var(--font-weight-semi-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    margin: 1.5rem 0 0.625rem;
}

/* Paragraphs */
p {
    margin: 0 0 1.5rem;
    line-height: var(--line-height-relaxed);
}

/* Links */
a {
    color: var(--text-accent);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
    color: color-mix(in srgb, var(--text-accent) 90%, black);
    text-decoration: underline;
}

/* Lists */
ul, ol {
    margin: 0 0 1.5rem;
    padding-left: 1.5rem;
}

li {
    margin-bottom: 0.5rem;
    line-height: var(--line-height-relaxed);
}

/* Blockquotes */
blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 4px solid var(--text-muted);
    color: var(--text-secondary);
    font-style: italic;
}

/* Code */
code, pre {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9em;
    background-color: #f5f5f5;
    border-radius: 3px;
    padding: 0.2em 0.4em;
}

pre {
    padding: 1rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}

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

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semi-bold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extra-bold); }

.leading-none { line-height: var(--line-height-none); }
.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }
.leading-loose { line-height: var(--line-height-loose); }

/* Responsive Typography */
@media (max-width: 1200px) {
    :root {
        --h1-size: var(--font-size-6xl);
        --h2-size: var(--font-size-5xl);
        --h3-size: var(--font-size-4xl);
        --h4-size: var(--font-size-3xl);
        --h5-size: var(--font-size-2xl);
        --h6-size: var(--font-size-xl);
    }
}

@media (max-width: 992px) {
    :root {
        --h1-size: var(--font-size-5xl);
        --h2-size: var(--font-size-4xl);
        --h3-size: var(--font-size-3xl);
        --h4-size: var(--font-size-2xl);
        --h5-size: var(--font-size-xl);
        --h6-size: var(--font-size-lg);
    }
    
    body {
        font-size: calc(var(--font-size-base) * 0.95);
    }
}

@media (max-width: 768px) {
    :root {
        --h1-size: var(--font-size-4xl);
        --h2-size: var(--font-size-3xl);
        --h3-size: var(--font-size-2xl);
        --h4-size: var(--font-size-xl);
        --h5-size: var(--font-size-lg);
        --h6-size: var(--font-size-base);
    }
    
    body {
        font-size: calc(var(--font-size-base) * 0.925);
    }
    
    h1, .h1 { margin: 0 0 1.25rem; }
    h2, .h2 { margin: 2.5rem 0 1.25rem; }
    h3, .h3 { margin: 2rem 0 1rem; }
    h4, .h4 { margin: 1.75rem 0 0.875rem; }
    h5, .h5 { margin: 1.5rem 0 0.75rem; }
    h6, .h6 { margin: 1.25rem 0 0.625rem; }
}

/* Print Styles */
@media print {
    body {
        font-size: 12pt;
        line-height: 1.3;
    }
    
    h1, .h1 { font-size: 24pt; }
    h2, .h2 { font-size: 18pt; }
    h3, .h3 { font-size: 14pt; }
    h4, .h4 { font-size: 12pt; }
    h5, .h5, h6, .h6 { font-size: 11pt; }
    
    a {
        text-decoration: underline;
    }
    
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        font-weight: normal;
    }

}

/* Base Typography */
body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-secondary);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-top: 0;
    margin-bottom: 0.5em;
    color: var(--text-primary);
}

h1, .h1 {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    letter-spacing: var(--letter-spacing-tight);
}

h2, .h2 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    letter-spacing: var(--letter-spacing-tight);
}

h3, .h3 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semi-bold);
    line-height: 1.25;
}

h4, .h4 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semi-bold);
    line-height: 1.3;
}

h5, .h5 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semi-bold);
    line-height: 1.35;
}

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

/* Paragraphs */
p {
    margin-top: 0;
    margin-bottom: 1.5rem;
    line-height: var(--line-height-relaxed);
}

/* Links */
a {
    color: var(--text-accent);
    text-decoration: none;
    transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

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

/* Lists */
ul, ol {
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

ul {
    list-style-type: disc;
}

ol {
    list-style-type: decimal;
}

li {
    margin-bottom: 0.5rem;
    line-height: var(--line-height-relaxed);
}

/* Blockquotes */
blockquote {
    margin: 2rem 0;
    padding: 1.5rem;
    border-left: 4px solid var(--text-accent);
    background-color: rgba(49, 130, 206, 0.05);
    font-style: italic;
    color: var(--text-secondary);
}

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

/* Code */
code, kbd, pre, samp {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9em;
    background-color: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
    padding: 0.2em 0.4em;
}

pre {
    padding: 1rem;
    margin: 1.5rem 0;
    overflow-x: auto;
    border-radius: 0.375rem;
}

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

/* Text Utilities */
.text-uppercase {
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.text-lowercase {
    text-transform: lowercase;
}

.text-capitalize {
    text-transform: capitalize;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Responsive Typography */
@media (max-width: 1024px) {
    :root {
        --font-size-5xl: 2.5rem;
        --font-size-4xl: 2.25rem;
        --font-size-3xl: 2rem;
        --font-size-2xl: 1.75rem;
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-5xl: 2.25rem;
        --font-size-4xl: 2rem;
        --font-size-3xl: 1.75rem;
        --font-size-2xl: 1.5rem;
        --font-size-xl: 1.25rem;
        --font-size-lg: 1.125rem;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-5xl: 2rem;
        --font-size-4xl: 1.75rem;
        --font-size-3xl: 1.5rem;
        --font-size-2xl: 1.375rem;
    }
}

/* Print Styles */
@media print {
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 80%;
    }
    
    a[href^="#"]:after {
        content: "";
    }
}