/**
 * Fluid Responsive Typography System
 * 
 * Centralized typography scale using clamp() for seamless responsive scaling
 * across all viewport sizes without relying solely on media query breakpoints.
 * 
 * @package ASI_Solutions
 * @version 1.0.0
 */

/* ========================================
   FLUID TYPOGRAPHY SCALE
   ======================================== */

/* Display headings (hero titles) */
:root {
  --fluid-display: clamp(2rem, 1rem + 4vw, 4.5rem); /* 32px → 72px */
  --fluid-h1: clamp(1.75rem, 1rem + 3vw, 3.75rem); /* 28px → 60px */
  --fluid-h2: clamp(1.5rem, 0.875rem + 2.5vw, 3rem); /* 24px → 48px */
  --fluid-h3: clamp(1.25rem, 0.75rem + 2vw, 2rem); /* 20px → 32px */
  --fluid-body-large: clamp(1rem, 0.875rem + 0.5vw, 1.25rem); /* 16px → 20px */
  --fluid-body-base: clamp(0.875rem, 0.8125rem + 0.25vw, 1rem); /* 14px → 16px */
  --fluid-body-small: clamp(0.75rem, 0.7rem + 0.25vw, 0.9375rem); /* 12px → 15px */
  --fluid-button: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); /* 12px → 14px */
  
  /* Line height scale */
  --line-height-tight: 1.1;
  --line-height-snug: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
}

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

.fluid-display {
  font-size: var(--fluid-display);
  line-height: var(--line-height-tight);
}

.fluid-h1 {
  font-size: var(--fluid-h1);
  line-height: var(--line-height-snug);
}

.fluid-h2 {
  font-size: var(--fluid-h2);
  line-height: var(--line-height-snug);
}

.fluid-h3 {
  font-size: var(--fluid-h3);
  line-height: var(--line-height-snug);
}

.fluid-body-large {
  font-size: var(--fluid-body-large);
  line-height: var(--line-height-normal);
}

.fluid-body-base {
  font-size: var(--fluid-body-base);
  line-height: var(--line-height-normal);
}

.fluid-body-small {
  font-size: var(--fluid-body-small);
  line-height: var(--line-height-normal);
}

.fluid-button {
  font-size: var(--fluid-button);
  line-height: 1;
}

/* ========================================
   COMPONENT-SPECIFIC FLUID TYPOGRAPHY
   ======================================== */

/* Hero component specific scales */
.fluid-hero-title {
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); /* 40px → 72px */
  line-height: var(--line-height-tight);
}

.fluid-hero-subtitle {
  font-size: clamp(1rem, 0.875rem + 0.5vw, 1.125rem); /* 16px → 18px */
  line-height: var(--line-height-normal);
}

.fluid-hero-description {
  font-size: clamp(0.875rem, 0.8125rem + 0.25vw, 1rem); /* 14px → 16px */
  line-height: var(--line-height-normal);
}

.fluid-hero-button {
  font-size: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); /* 12px → 14px */
  line-height: 1;
}

/* Tiles component specific scales */
.fluid-tiles-title {
  font-size: clamp(2rem, 1rem + 3.5vw, 4.125rem); /* 32px → 66px */
  line-height: var(--line-height-tight);
}

.fluid-tile-title {
  font-size: clamp(1.25rem, 0.875rem + 1.5vw, 1.75rem); /* 20px → 28px */
  line-height: var(--line-height-snug);
}

.fluid-tile-description {
  font-size: clamp(0.875rem, 0.8125rem + 0.25vw, 1rem); /* 14px → 16px */
  line-height: var(--line-height-relaxed);
}

/* Content component specific scales */
.fluid-content-title {
  font-size: clamp(1.75rem, 1rem + 3vw, 3.75rem); /* 28px → 60px */
  line-height: var(--line-height-snug);
}

.fluid-content-subtitle {
  font-size: clamp(1rem, 0.875rem + 0.5vw, 1.25rem); /* 16px → 20px */
  line-height: var(--line-height-normal);
}

.fluid-content-description {
  font-size: clamp(0.875rem, 0.8125rem + 0.25vw, 1rem); /* 14px → 16px */
  line-height: var(--line-height-normal);
}

.fluid-content-video-label {
  font-size: clamp(0.875rem, 0.8125rem + 0.625vw, 1.5625rem); /* 14px → 25px */
  line-height: var(--line-height-snug);
}

/* Testimonials component specific scales */
.fluid-testimonials-title {
  font-size: clamp(2rem, 1rem + 3vw, 3.75rem); /* 32px → 60px */
  line-height: var(--line-height-tight);
}

.fluid-testimonial-quote {
  font-size: clamp(1rem, 0.875rem + 0.5vw, 1.125rem); /* 16px → 18px */
  line-height: var(--line-height-relaxed);
}

.fluid-testimonial-body {
  font-size: clamp(0.875rem, 0.8125rem + 0.25vw, 0.9375rem); /* 14px → 15px */
  line-height: var(--line-height-normal);
}

.fluid-testimonial-name {
  font-size: clamp(1rem, 0.875rem + 0.5vw, 1.125rem); /* 16px → 18px */
  line-height: var(--line-height-snug);
}

/* Accordion component specific scales */
.fluid-accordion-tab-title {
  font-size: clamp(1.75rem, 1rem + 3vw, 3.75rem); /* 28px → 60px */
  line-height: var(--line-height-snug);
}

.fluid-accordion-tab-number {
  font-size: clamp(1.25rem, 0.875rem + 1.5vw, 1.875rem); /* 20px → 30px */
  line-height: var(--line-height-snug);
}

.fluid-accordion-tab-description {
  font-size: clamp(1rem, 0.875rem + 0.5vw, 1.25rem); /* 16px → 20px */
  line-height: var(--line-height-normal);
}

.fluid-accordion-delivery-title {
  font-size: clamp(1.25rem, 0.875rem + 1.5vw, 1.875rem); /* 20px → 30px */
  line-height: var(--line-height-snug);
}

.fluid-accordion-delivery-text {
  font-size: clamp(1rem, 0.875rem + 0.625vw, 1.5rem); /* 16px → 24px */
  line-height: var(--line-height-normal);
}

.fluid-accordion-button-title {
  font-size: clamp(0.875rem, 0.8125rem + 0.5vw, 1.375rem); /* 14px → 22px */
  line-height: var(--line-height-snug);
}

.fluid-accordion-button-number {
  font-size: clamp(0.875rem, 0.8125rem + 0.5vw, 1.375rem); /* 14px → 22px */
  line-height: 1;
}

/* CTA component specific scales */
.fluid-cta-title {
  font-size: clamp(2rem, 1rem + 3vw, 3.75rem); /* 32px → 60px */
  line-height: var(--line-height-tight);
}

.fluid-cta-description {
  font-size: clamp(0.875rem, 0.8125rem + 0.5vw, 1.25rem); /* 14px → 20px */
  line-height: var(--line-height-normal);
}

.fluid-cta-button {
  font-size: clamp(0.6875rem, 0.65rem + 0.25vw, 0.875rem); /* 11px → 14px */
  line-height: 1;
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Ensure minimum font sizes for accessibility */
@media (max-width: 320px) {
  :root {
    --fluid-body-base: clamp(0.875rem, 0.875rem, 1rem); /* Minimum 14px */
    --fluid-body-small: clamp(0.75rem, 0.75rem, 0.9375rem); /* Minimum 12px */
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .fluid-display,
  .fluid-h1,
  .fluid-h2,
  .fluid-h3 {
    font-weight: 700; /* Increase weight for better contrast */
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

/* ========================================
   BROWSER SUPPORT FALLBACKS
   ======================================== */

/* Fallback for browsers without clamp() support */
@supports not (font-size: clamp(1rem, 1rem + 1vw, 2rem)) {
  .fluid-display { font-size: 2.5rem; }
  .fluid-h1 { font-size: 2rem; }
  .fluid-h2 { font-size: 1.5rem; }
  .fluid-h3 { font-size: 1.25rem; }
  .fluid-body-large { font-size: 1.125rem; }
  .fluid-body-base { font-size: 1rem; }
  .fluid-body-small { font-size: 0.875rem; }
  .fluid-button { font-size: 0.875rem; }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* GPU acceleration for smooth scaling */
.fluid-display,
.fluid-h1,
.fluid-h2,
.fluid-h3 {
  will-change: font-size;
  transform: translateZ(0);
}

/* Optimize font rendering */
.fluid-display,
.fluid-h1,
.fluid-h2,
.fluid-h3,
.fluid-body-large,
.fluid-body-base,
.fluid-body-small {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}