/**
 * Vibe Awards - Typography System
 * Consistent typography scale and spacing throughout the platform
 */

/* Typography Scale */
:root {
    /* Font Sizes - Apple-inspired scale */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 32px;
    --text-4xl: 40px;
    --text-5xl: 48px;
    --text-6xl: 64px;
    
    /* Line Heights */
    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    
    /* Letter Spacing */
    --tracking-tighter: -0.02em;
    --tracking-tight: -0.01em;
    --tracking-normal: 0em;
    --tracking-wide: 0.01em;
    --tracking-wider: 0.02em;
    
    /* Font Weights */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    
    /* Spacing Scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 80px;
    --space-5xl: 120px;
}

/* Base Typography */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', sans-serif;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    font-weight: var(--font-normal);
    letter-spacing: var(--tracking-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Heading Styles */
.heading-1, h1 {
    font-size: var(--text-6xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    margin-bottom: var(--space-lg);
}

.heading-2, h2 {
    font-size: var(--text-5xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-lg);
}

.heading-3, h3 {
    font-size: var(--text-4xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-md);
}

.heading-4, h4 {
    font-size: var(--text-3xl);
    font-weight: var(--font-medium);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-md);
}

.heading-5, h5 {
    font-size: var(--text-2xl);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-sm);
}

.heading-6, h6 {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-sm);
}

/* Body Text Styles */
.text-large {
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed);
}

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

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

.text-tiny {
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
}

/* Text Weights */
.font-light { font-weight: var(--font-light); }
.font-normal { font-weight: var(--font-normal); }
.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); }

/* Text Colors */
.text-primary { color: #F5F5F7; }
.text-secondary { color: rgba(245, 245, 247, 0.8); }
.text-tertiary { color: rgba(245, 245, 247, 0.6); }
.text-muted { color: rgba(245, 245, 247, 0.4); }
.text-accent { color: var(--apple-blue); }
.text-success { color: var(--apple-green); }
.text-warning { color: var(--apple-orange); }
.text-error { color: var(--apple-red); }

/* Component-Specific Typography */

/* Hero Section */
.hero-title {
    font-size: var(--text-6xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    margin-bottom: var(--space-lg);
    background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.6) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: var(--text-2xl);
    font-weight: var(--font-normal);
    line-height: var(--leading-relaxed);
    color: rgba(245, 245, 247, 0.8);
    margin-bottom: var(--space-2xl);
}

/* Card Typography */
.card-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-sm);
    color: #F5F5F7;
}

.card-subtitle {
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-sm);
    color: rgba(245, 245, 247, 0.9);
}

.card-description {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: rgba(245, 245, 247, 0.8);
    margin-bottom: var(--space-md);
}

.card-meta {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: rgba(245, 245, 247, 0.6);
}

/* Navigation Typography */
.nav-logo {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
}

.nav-link {
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    letter-spacing: var(--tracking-normal);
}

.nav-dropdown-toggle {
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
}

.nav-dropdown-item {
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
}

/* Button Typography */
.btn {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-normal);
}

.btn-large {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
}

.btn-small {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

/* Form Typography */
.form-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: rgba(245, 245, 247, 0.9);
    margin-bottom: var(--space-xs);
    display: block;
}

.form-input, .form-textarea, .form-select {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    font-family: inherit;
}

.form-help {
    font-size: var(--text-xs);
    color: rgba(245, 245, 247, 0.6);
    margin-top: var(--space-xs);
}

.form-error {
    font-size: var(--text-xs);
    color: var(--apple-red);
    margin-top: var(--space-xs);
}

/* Badge and Tag Typography */
.badge {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

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

/* Code Typography */
.code-inline {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 0.9em;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.code-block {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    background: rgba(0, 0, 0, 0.4);
    padding: var(--space-md);
    border-radius: 8px;
    overflow-x: auto;
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

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

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

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

/* Responsive Typography */
@media (max-width: 768px) {
    :root {
        --text-6xl: 48px;
        --text-5xl: 40px;
        --text-4xl: 32px;
        --text-3xl: 28px;
        --text-2xl: 22px;
        --text-xl: 18px;
    }
    
    .hero-title {
        font-size: var(--text-5xl);
        margin-bottom: var(--space-md);
    }
    
    .hero-subtitle {
        font-size: var(--text-lg);
        margin-bottom: var(--space-xl);
    }
    
    .card-title {
        font-size: var(--text-xl);
    }
    
    .card-subtitle {
        font-size: var(--text-base);
    }
}

@media (max-width: 480px) {
    :root {
        --text-6xl: 40px;
        --text-5xl: 32px;
        --text-4xl: 28px;
        --text-3xl: 24px;
        --text-2xl: 20px;
        --text-xl: 16px;
    }
    
    .hero-title {
        font-size: var(--text-4xl);
    }
    
    .hero-subtitle {
        font-size: var(--text-base);
    }
}

/* Consistent Spacing System */
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.mb-3xl { margin-bottom: var(--space-3xl); }

.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }

.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.p-2xl { padding: var(--space-2xl); }

.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }

.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }