/* ===== MODERN TYPOGRAPHY SYSTEM ===== */

/* Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Typography Variables */
:root {
    /* Font Families */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    
    /* Font Weights */
    --font-thin: 100;
    --font-extralight: 200;
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;
    
    /* Letter Spacing */
    --letter-tighter: -0.05em;
    --letter-tight: -0.025em;
    --letter-normal: 0em;
    --letter-wide: 0.025em;
    --letter-wider: 0.05em;
    --letter-widest: 0.1em;
    
    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
}

/* Base Typography */
body, input, textarea, select, button {
    font-family: var(--font-primary);
    font-weight: var(--font-regular);
    line-height: var(--leading-normal);
    letter-spacing: var(--letter-normal);
    font-feature-settings: 'liga' 1, 'calt' 1, 'kern' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--letter-tight);
    color: #1a202c;
    margin-bottom: 1rem;
}

h1, .h1 {
    font-size: 3rem;
    font-weight: var(--font-extrabold);
    letter-spacing: var(--letter-tighter);
    line-height: var(--leading-none);
    color: var(--text-primary, #1a202c);
}

/* Apply gradient text effect only when explicitly requested */
h1.text-gradient, .h1.text-gradient {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

h2, .h2 {
    font-size: 2.25rem;
    font-weight: var(--font-bold);
    color: #2d3748;
    position: relative;
}

h2::after, .h2::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--primary-gradient);
    border-radius: 2px;
}

h3, .h3 {
    font-size: 1.875rem;
    font-weight: var(--font-semibold);
    color: #4a5568;
}

h4, .h4 {
    font-size: 1.5rem;
    font-weight: var(--font-semibold);
    color: #4a5568;
}

h5, .h5 {
    font-size: 1.25rem;
    font-weight: var(--font-medium);
    color: #4a5568;
}

h6, .h6 {
    font-size: 1rem;
    font-weight: var(--font-medium);
    color: #718096;
    text-transform: uppercase;
    letter-spacing: var(--letter-wider);
}

/* Body Text */
p, .text-base {
    font-family: var(--font-primary);
    font-weight: var(--font-regular);
    line-height: var(--leading-relaxed);
    color: #4a5568;
    margin-bottom: 1rem;
}

/* Typography Utility Classes */
.text-display { font-family: var(--font-display); }
.text-mono { font-family: var(--font-mono); }

.text-gradient {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.text-gradient-secondary {
    background: var(--secondary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Font Weight Utilities */
.font-thin { font-weight: var(--font-thin); }
.font-extralight { font-weight: var(--font-extralight); }
.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); }

/* Letter Spacing Utilities */
.tracking-tighter { letter-spacing: var(--letter-tighter); }
.tracking-tight { letter-spacing: var(--letter-tight); }
.tracking-normal { letter-spacing: var(--letter-normal); }
.tracking-wide { letter-spacing: var(--letter-wide); }
.tracking-wider { letter-spacing: var(--letter-wider); }
.tracking-widest { letter-spacing: var(--letter-widest); }

/* Line Height Utilities */
.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); }

/* Text Size Utilities */
.text-xs {
    font-size: 0.75rem;
    line-height: var(--leading-normal);
}

.text-sm {
    font-size: 0.875rem;
    line-height: var(--leading-normal);
}

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

.text-xl {
    font-size: 1.25rem;
    line-height: var(--leading-normal);
}

.text-2xl {
    font-size: 1.5rem;
    line-height: var(--leading-tight);
}

.text-3xl {
    font-size: 1.875rem;
    line-height: var(--leading-tight);
}

.text-4xl {
    font-size: 2.25rem;
    line-height: var(--leading-none);
}

.text-5xl {
    font-size: 3rem;
    line-height: var(--leading-none);
}

.text-6xl {
    font-size: 3.75rem;
    line-height: var(--leading-none);
}

/* Special Text Styles */
.text-hero {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: var(--font-black);
    line-height: var(--leading-none);
    letter-spacing: var(--letter-tighter);
    background: var(--professional-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    margin-bottom: 1.5rem;
}

.text-subtitle {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: var(--font-regular);
    color: #718096;
    line-height: var(--leading-relaxed);
    letter-spacing: var(--letter-wide);
}

.text-caption {
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: var(--font-medium);
    color: #a0aec0;
    text-transform: uppercase;
    letter-spacing: var(--letter-widest);
}

/* Code and Preformatted Text */
code, pre, .code {
    font-family: var(--font-mono);
    background: rgba(74, 85, 104, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    letter-spacing: var(--letter-normal);
}

pre {
    padding: 1rem;
    overflow-x: auto;
    background: #2d3748;
    color: #e2e8f0;
    border-radius: 0.5rem;
}

/* Links */
a {
    color: var(--accent-blue);
    text-decoration: none;
    font-weight: var(--font-medium);
    transition: all 0.3s ease;
}

a:hover {
    color: var(--navy-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

/* Quote Styles */
blockquote {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: var(--font-medium);
    font-style: italic;
    color: var(--text-secondary);
    border-left: 4px solid var(--accent-blue);
    padding-left: 1.5rem;
    margin: 2rem 0;
    line-height: var(--leading-relaxed);
}

/* List Styles */
ul, ol {
    font-family: var(--font-primary);
    color: #4a5568;
    line-height: var(--leading-relaxed);
}

li {
    margin-bottom: 0.5rem;
}

/* Component-Specific Typography */

/* Form Elements */
label {
    font-family: var(--font-primary);
    font-weight: var(--font-semibold);
    color: #2d3748;
    letter-spacing: var(--letter-wide);
    font-size: 0.875rem;
    text-transform: uppercase;
}

/* Buttons */
.btn {
    font-family: var(--font-primary) !important;
    font-weight: var(--font-semibold) !important;
    letter-spacing: var(--letter-wide) !important;
    text-transform: uppercase !important;
    font-size: 0.875rem !important;
}

/* Cards */
.card-title {
    font-family: var(--font-display);
    font-weight: var(--font-bold);
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.card-text {
    font-family: var(--font-primary);
    color: #4a5568;
    line-height: var(--leading-relaxed);
}

/* Tables */
table {
    font-family: var(--font-primary);
}

th {
    font-weight: var(--font-semibold);
    color: #2d3748;
    letter-spacing: var(--letter-wide);
    text-transform: uppercase;
    font-size: 0.75rem;
}

td {
    font-weight: var(--font-regular);
    color: #4a5568;
}

/* Navigation */
.navbar-brand {
    font-family: var(--font-display) !important;
    font-weight: var(--font-bold) !important;
    font-size: 1.5rem !important;
    letter-spacing: var(--letter-tight) !important;
}

.nav-link {
    font-family: var(--font-primary) !important;
    font-weight: var(--font-medium) !important;
    letter-spacing: var(--letter-normal) !important;
}

/* Badges */
.badge {
    font-family: var(--font-primary);
    font-weight: var(--font-semibold);
    letter-spacing: var(--letter-wide);
    text-transform: uppercase;
    font-size: 0.75rem;
}

/* Alerts */
.alert {
    font-family: var(--font-primary);
    font-weight: var(--font-regular);
    line-height: var(--leading-relaxed);
}

.alert-heading {
    font-family: var(--font-display);
    font-weight: var(--font-bold);
}

/* Responsive Typography */
@media (max-width: 768px) {
    h1, .h1 { font-size: 2.25rem; }
    h2, .h2 { font-size: 1.875rem; }
    h3, .h3 { font-size: 1.5rem; }
    
    .text-hero {
        font-size: clamp(2rem, 8vw, 3rem);
    }
}

@media (max-width: 480px) {
    h1, .h1 { font-size: 1.875rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.25rem; }
    
    .text-hero {
        font-size: clamp(1.75rem, 10vw, 2.5rem);
    }
}