/* ============================================
   PARALLAX TYPOGRAPHY SYSTEM
   Robust, Coherent Font Sizing Across All Components
   ============================================ */

/* ============================================
   TYPOGRAPHY VARIABLES - SEMANTIC NAMING
   ============================================ */
:root {
  /* Display Sizes - For Hero Sections & Major Headers */
  --font-display-1: 56px;      /* Hero titles, major headlines */
  --font-display-2: 48px;      /* Sub-hero, modal hero titles */
  --font-display-3: 40px;      /* Large section headers */
  
  /* Heading Sizes - For Section & Component Headers */
  --font-heading-1: 32px;      /* Main section titles */
  --font-heading-2: 28px;      /* Subsection titles */
  --font-heading-3: 24px;      /* Component titles, card headers */
  --font-heading-4: 20px;      /* Small card titles */
  --font-heading-5: 18px;      /* FAQ questions, list headers */
  --font-heading-6: 16px;      /* Minor headings, labels */
  
  /* Body Sizes - For Content Text */
  --font-body-xl: 18px;        /* Large body text, important descriptions */
  --font-body-lg: 16px;        /* Standard large text */
  --font-body-base: 17px;      /* Default body text - INCREASED from 16px */
  --font-body-sm: 14px;        /* Smaller body text */
  --font-body-xs: 13px;        /* Caption text, helper text */
  
  /* UI Sizes - For Interface Elements */
  --font-ui-lg: 15px;          /* Large buttons, inputs */
  --font-ui-base: 14px;        /* Standard buttons, inputs */
  --font-ui-sm: 13px;          /* Small buttons, badges */
  --font-ui-xs: 12px;          /* Tiny UI elements */
  
  /* Label & Caption Sizes */
  --font-label-lg: 13px;       /* Large labels */
  --font-label-base: 12px;     /* Standard labels */
  --font-label-sm: 11px;       /* Small labels, eyebrows */
  --font-label-xs: 10px;       /* Tiny labels, micro text */
  
  /* Price & Number Sizes - For Pricing Display */
  --font-price-hero: 28px;     /* Hero pricing */
  --font-price-lg: 24px;       /* Large pricing */
  --font-price-base: 18px;     /* Standard pricing */
  --font-price-sm: 18px;       /* Small pricing */
  
  /* Line Heights - Semantic Naming */
  --line-height-display: 1.1;  /* For large display text */
  --line-height-heading: 1.2;  /* For headings */
  --line-height-body: 1.6;     /* For body text */
  --line-height-relaxed: 1.8;  /* For comfortable reading */
  
  /* Letter Spacing */
  --letter-spacing-tight: -1px;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.5px;
  --letter-spacing-wider: 1px;
  --letter-spacing-widest: 2px;
}

/* ============================================
   RESPONSIVE FONT SCALING
   ============================================ */

/* Tablet (768px - 1024px) - Scale down by 10% */
@media (max-width: 1024px) {
  :root {
    /* Display Sizes */
    --font-display-1: 48px;
    --font-display-2: 40px;
    --font-display-3: 32px;
    
    /* Heading Sizes */
    --font-heading-1: 28px;
    --font-heading-2: 24px;
    --font-heading-3: 22px;
    --font-heading-4: 18px;
    --font-heading-5: 16px;
    --font-heading-6: 15px;
    
    /* Body & UI stay the same for tablet */
    
    /* Price Sizes */
    --font-price-hero: 24px;
    --font-price-lg: 22px;
    --font-price-base: 16px;
    --font-price-sm: 16px;
  }
}

/* Mobile (max 768px) - Scale down by 20% */
@media (max-width: 768px) {
  :root {
    /* Display Sizes */
    --font-display-1: 32px;
    --font-display-2: 28px;
    --font-display-3: 24px;
    
    /* Heading Sizes */
    --font-heading-1: 24px;
    --font-heading-2: 22px;
    --font-heading-3: 20px;
    --font-heading-4: 18px;
    --font-heading-5: 16px;
    --font-heading-6: 14px;
    
    /* Body Sizes */
    --font-body-xl: 16px;
    --font-body-lg: 15px;
    --font-body-base: 16px;    /* INCREASED from 15px */
    --font-body-sm: 13px;
    --font-body-xs: 12px;
    
    /* UI Sizes */
    --font-ui-lg: 14px;
    --font-ui-base: 13px;
    --font-ui-sm: 12px;
    --font-ui-xs: 11px;
    
    /* Price Sizes */
    --font-price-hero: 22px;
    --font-price-lg: 20px;
    --font-price-base: 16px;
    --font-price-sm: 16px;
  }
}

/* Small Mobile (max 480px) - Scale down by 25% */
@media (max-width: 480px) {
  :root {
    /* Display Sizes */
    --font-display-1: 28px;
    --font-display-2: 24px;
    --font-display-3: 22px;
    
    /* Heading Sizes */
    --font-heading-1: 22px;
    --font-heading-2: 20px;
    --font-heading-3: 18px;
    --font-heading-4: 16px;
    --font-heading-5: 15px;
    --font-heading-6: 14px;
    
    /* Body Sizes */
    --font-body-xl: 15px;
    --font-body-lg: 14px;
    --font-body-base: 15px;    /* INCREASED from 14px */
    --font-body-sm: 12px;
    --font-body-xs: 11px;
    
    /* Price Sizes */
    --font-price-hero: 20px;
    --font-price-lg: 18px;
    --font-price-base: 14px;
    --font-price-sm: 14px;
  }
}

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

/* Display Classes */
.text-display-1 { font-size: var(--font-display-1); line-height: var(--line-height-display); }
.text-display-2 { font-size: var(--font-display-2); line-height: var(--line-height-display); }
.text-display-3 { font-size: var(--font-display-3); line-height: var(--line-height-heading); }

/* Heading Classes */
.text-heading-1 { font-size: var(--font-heading-1); line-height: var(--line-height-heading); }
.text-heading-2 { font-size: var(--font-heading-2); line-height: var(--line-height-heading); }
.text-heading-3 { font-size: var(--font-heading-3); line-height: var(--line-height-heading); }
.text-heading-4 { font-size: var(--font-heading-4); line-height: var(--line-height-heading); }
.text-heading-5 { font-size: var(--font-heading-5); line-height: var(--line-height-heading); }
.text-heading-6 { font-size: var(--font-heading-6); line-height: var(--line-height-heading); }

/* Body Classes */
.text-body-xl { font-size: var(--font-body-xl); line-height: var(--line-height-body); }
.text-body-lg { font-size: var(--font-body-lg); line-height: var(--line-height-body); }
.text-body-base { font-size: var(--font-body-base); line-height: var(--line-height-body); }
.text-body-sm { font-size: var(--font-body-sm); line-height: var(--line-height-body); }
.text-body-xs { font-size: var(--font-body-xs); line-height: var(--line-height-body); }

/* UI Classes */
.text-ui-lg { font-size: var(--font-ui-lg); }
.text-ui-base { font-size: var(--font-ui-base); }
.text-ui-sm { font-size: var(--font-ui-sm); }
.text-ui-xs { font-size: var(--font-ui-xs); }

/* Label Classes */
.text-label-lg { font-size: var(--font-label-lg); }
.text-label-base { font-size: var(--font-label-base); }
.text-label-sm { font-size: var(--font-label-sm); }
.text-label-xs { font-size: var(--font-label-xs); }

/* Price Classes */
.text-price-hero { font-size: var(--font-price-hero); }
.text-price-lg { font-size: var(--font-price-lg); }
.text-price-base { font-size: var(--font-price-base); }
.text-price-sm { font-size: var(--font-price-sm); }