/* ====================================
   VELORA MONETIZATION TYPOGRAPHY
   Editorial Serif/Sans Pairing
   Cozy, Reliable, Personable
   ==================================== */

/* Import fonts if using Typekit/Google Fonts */
/* Option A: Canela + Inter */
/* Option B: Newsreader + Inter */

/* For now, using existing fonts with enhanced styling */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* ========================================
       FONT FAMILIES
       ======================================== */
    
    /* Editorial headings - Option B: Newsreader */
    --monetization-font-heading: 'Newsreader', 'Cormorant Garamond', 'Crimson Text', Georgia, serif;
    
    /* UI and body - Inter */
    --monetization-font-body: 'Inter', 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* ========================================
       FLUID TYPE SCALE (Monetization Pages)
       ======================================== */
    
    /* H1 - Hero titles */
    --monetization-text-hero: clamp(2.25rem, 1.9rem + 1.75vw, 3rem); /* 36px - 48px */
    
    /* H2 - Section titles */
    --monetization-text-h2: clamp(1.875rem, 1.6rem + 1.375vw, 2.25rem); /* 30px - 36px */
    
    /* H3 - Subsection titles */
    --monetization-text-h3: clamp(1.5rem, 1.3rem + 1vw, 1.875rem); /* 24px - 30px */
    
    /* H4 - Card titles */
    --monetization-text-h4: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); /* 20px - 24px */
    
    /* Body large - Lead paragraphs */
    --monetization-text-body-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem); /* 18px - 20px */
    
    /* Body - Standard text */
    --monetization-text-body: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); /* 16px - 18px */
    
    /* Body small - Supporting text */
    --monetization-text-body-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem); /* 14px - 16px */
    
    /* Small - Microcopy, labels */
    --monetization-text-small: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); /* 12px - 14px */
    
    /* ========================================
       LINE HEIGHTS (Readability)
       ======================================== */
    
    --monetization-leading-tight: 1.25;
    --monetization-leading-snug: 1.375;
    --monetization-leading-normal: 1.6;
    --monetization-leading-relaxed: 1.75;
    --monetization-leading-loose: 2;
    
    /* ========================================
       FONT WEIGHTS
       ======================================== */
    
    --monetization-weight-light: 300;
    --monetization-weight-normal: 400;
    --monetization-weight-medium: 500;
    --monetization-weight-semibold: 600;
    --monetization-weight-bold: 700;
}

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

.monetization-hero-title {
    font-family: var(--monetization-font-heading);
    font-size: var(--monetization-text-hero);
    font-weight: var(--monetization-weight-semibold);
    line-height: var(--monetization-leading-tight);
    color: var(--monetization-text-primary);
    letter-spacing: -0.02em;
}

.monetization-section-title {
    font-family: var(--monetization-font-heading);
    font-size: var(--monetization-text-h2);
    font-weight: var(--monetization-weight-semibold);
    line-height: var(--monetization-leading-snug);
    color: var(--monetization-text-primary);
    letter-spacing: -0.01em;
}

.monetization-subsection-title {
    font-family: var(--monetization-font-heading);
    font-size: var(--monetization-text-h3);
    font-weight: var(--monetization-weight-medium);
    line-height: var(--monetization-leading-snug);
    color: var(--monetization-text-primary);
}

.monetization-card-title {
    font-family: var(--monetization-font-heading);
    font-size: var(--monetization-text-h4);
    font-weight: var(--monetization-weight-semibold);
    line-height: var(--monetization-leading-snug);
    color: var(--monetization-text-primary);
}

.monetization-body-lg {
    font-family: var(--monetization-font-body);
    font-size: var(--monetization-text-body-lg);
    font-weight: var(--monetization-weight-normal);
    line-height: var(--monetization-leading-relaxed);
    color: var(--monetization-text-secondary);
}

.monetization-body {
    font-family: var(--monetization-font-body);
    font-size: var(--monetization-text-body);
    font-weight: var(--monetization-weight-normal);
    line-height: var(--monetization-leading-relaxed);
    color: var(--monetization-text-secondary);
}

.monetization-body-sm {
    font-family: var(--monetization-font-body);
    font-size: var(--monetization-text-body-sm);
    font-weight: var(--monetization-weight-normal);
    line-height: var(--monetization-leading-relaxed);
    color: var(--monetization-text-muted);
}

.monetization-small {
    font-family: var(--monetization-font-body);
    font-size: var(--monetization-text-small);
    font-weight: var(--monetization-weight-normal);
    line-height: var(--monetization-leading-normal);
    color: var(--monetization-text-muted);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    :root {
        --monetization-text-hero: clamp(1.875rem, 1.6rem + 1.375vw, 2.25rem);
        --monetization-text-h2: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
        --monetization-text-h3: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    }
}