/* ============================================
   ADVANCED FLUID TYPOGRAPHY CONFIG
   Uses precise mathematical fluid type calculations
   ============================================ */

@import "tailwindcss";

@theme {
  /* ============================================
     CONFIGURATION VARIABLES
     Easily customize these values
     ============================================ */
  
  /* Viewport Breakpoints (in pixels) */
  --fluid-min-width: 360;
  --fluid-max-width: 1280;
  
  /* Base Font Sizes (in pixels) */
  --fluid-min-base: 16;
  --fluid-max-base: 18;
  
  /* Type Scale Ratios */
  --fluid-min-ratio: 1.2;     /* Minor third scale on mobile */
  --fluid-max-ratio: 1.25;    /* Major third scale on desktop */
  
  /* ============================================
     PRECISE FLUID TYPE CALCULATION
     Formula: clamp(MIN, PREFERRED, MAX)
     PREFERRED = MIN + (MAX - MIN) * ((100vw - MIN_VP) / (MAX_VP - MIN_VP))
     ============================================ */
  
  /* Helper: viewport width difference in rem */
  --vw-diff: calc((var(--fluid-max-width) - var(--fluid-min-width)) / 16);
  
  /* ============================================
     FLUID FONT SIZES
     Each size scales proportionally between breakpoints
     ============================================ */
  
  /* Step -2: Extra small */
  --font-size-xs: clamp(
    calc(var(--fluid-min-base) / var(--fluid-min-ratio) / var(--fluid-min-ratio) * 1px),
    calc(
      (var(--fluid-min-base) / var(--fluid-min-ratio) / var(--fluid-min-ratio) / 16) * 1rem + 
      ((var(--fluid-max-base) / var(--fluid-max-ratio) / var(--fluid-max-ratio)) - 
       (var(--fluid-min-base) / var(--fluid-min-ratio) / var(--fluid-min-ratio))) * 
      ((100vw - var(--fluid-min-width) * 1px) / ((var(--fluid-max-width) - var(--fluid-min-width))))
    ),
    calc(var(--fluid-max-base) / var(--fluid-max-ratio) / var(--fluid-max-ratio) * 1px)
  );
  
  /* Step -1: Small */
  --font-size-sm: clamp(
    calc(var(--fluid-min-base) / var(--fluid-min-ratio) * 1px),
    calc(
      (var(--fluid-min-base) / var(--fluid-min-ratio) / 16) * 1rem + 
      ((var(--fluid-max-base) / var(--fluid-max-ratio)) - 
       (var(--fluid-min-base) / var(--fluid-min-ratio))) * 
      ((100vw - var(--fluid-min-width) * 1px) / ((var(--fluid-max-width) - var(--fluid-min-width))))
    ),
    calc(var(--fluid-max-base) / var(--fluid-max-ratio) * 1px)
  );
  
  /* Step 0: Base */
  --font-size-base: clamp(
    calc(var(--fluid-min-base) * 1px),
    calc(
      (var(--fluid-min-base) / 16) * 1rem + 
      (var(--fluid-max-base) - var(--fluid-min-base)) * 
      ((100vw - var(--fluid-min-width) * 1px) / ((var(--fluid-max-width) - var(--fluid-min-width))))
    ),
    calc(var(--fluid-max-base) * 1px)
  );
  
  /* Step 1: Large */
  --font-size-lg: clamp(
    calc(var(--fluid-min-base) * var(--fluid-min-ratio) * 1px),
    calc(
      (var(--fluid-min-base) * var(--fluid-min-ratio) / 16) * 1rem + 
      ((var(--fluid-max-base) * var(--fluid-max-ratio)) - 
       (var(--fluid-min-base) * var(--fluid-min-ratio))) * 
      ((100vw - var(--fluid-min-width) * 1px) / ((var(--fluid-max-width) - var(--fluid-min-width))))
    ),
    calc(var(--fluid-max-base) * var(--fluid-max-ratio) * 1px)
  );
  
  /* Step 2: XL */
  --font-size-xl: clamp(
    calc(var(--fluid-min-base) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * 1px),
    calc(
      (var(--fluid-min-base) * var(--fluid-min-ratio) * var(--fluid-min-ratio) / 16) * 1rem + 
      ((var(--fluid-max-base) * var(--fluid-max-ratio) * var(--fluid-max-ratio)) - 
       (var(--fluid-min-base) * var(--fluid-min-ratio) * var(--fluid-min-ratio))) * 
      ((100vw - var(--fluid-min-width) * 1px) / ((var(--fluid-max-width) - var(--fluid-min-width))))
    ),
    calc(var(--fluid-max-base) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * 1px)
  );
  
  /* Step 3: 2XL */
  --font-size-2xl: clamp(
    calc(var(--fluid-min-base) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * 1px),
    calc(
      (var(--fluid-min-base) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) / 16) * 1rem + 
      ((var(--fluid-max-base) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * var(--fluid-max-ratio)) - 
       (var(--fluid-min-base) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio))) * 
      ((100vw - var(--fluid-min-width) * 1px) / ((var(--fluid-max-width) - var(--fluid-min-width))))
    ),
    calc(var(--fluid-max-base) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * 1px)
  );
  
  /* Step 4: 3XL */
  --font-size-3xl: clamp(
    calc(var(--fluid-min-base) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * 1px),
    calc(
      (var(--fluid-min-base) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) / 16) * 1rem + 
      ((var(--fluid-max-base) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * var(--fluid-max-ratio)) - 
       (var(--fluid-min-base) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio))) * 
      ((100vw - var(--fluid-min-width) * 1px) / ((var(--fluid-max-width) - var(--fluid-min-width))))
    ),
    calc(var(--fluid-max-base) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * 1px)
  );
  
  /* Step 5: 4XL */
  --font-size-4xl: clamp(
    calc(var(--fluid-min-base) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * 1px),
    calc(
      (var(--fluid-min-base) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) / 16) * 1rem + 
      ((var(--fluid-max-base) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * var(--fluid-max-ratio)) - 
       (var(--fluid-min-base) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio))) * 
      ((100vw - var(--fluid-min-width) * 1px) / ((var(--fluid-max-width) - var(--fluid-min-width))))
    ),
    calc(var(--fluid-max-base) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * 1px)
  );
  
  /* Step 6: 5XL (optional, for hero sections) */
  --font-size-5xl: clamp(
    calc(var(--fluid-min-base) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * 1px),
    calc(
      (var(--fluid-min-base) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) / 16) * 1rem + 
      ((var(--fluid-max-base) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * var(--fluid-max-ratio)) - 
       (var(--fluid-min-base) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio) * var(--fluid-min-ratio))) * 
      ((100vw - var(--fluid-min-width) * 1px) / ((var(--fluid-max-width) - var(--fluid-min-width))))
    ),
    calc(var(--fluid-max-base) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * var(--fluid-max-ratio) * 1px)
  );
  
  /* ============================================
     LINE HEIGHTS
     Optimized for readability at different sizes
     ============================================ */
  
  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* ============================================
     LETTER SPACING
     Tighter for large text, normal for body
     ============================================ */
  
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
}

/* ============================================
   SEMANTIC TYPOGRAPHY UTILITIES
   ============================================ */

@layer utilities {
  /* Display text - for hero sections and page headers */
  .text-display-xl {
    font-size: var(--font-size-5xl);
    line-height: var(--leading-tight);
    font-weight: 800;
    letter-spacing: var(--tracking-tighter);
  }
  
  .text-display-lg {
    font-size: var(--font-size-4xl);
    line-height: var(--leading-tight);
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
  }
  
  .text-display {
    font-size: var(--font-size-3xl);
    line-height: var(--leading-tight);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
  }
  
  /* Heading utilities - apply to any element */
  .text-h1 {
    font-size: var(--font-size-3xl);
    line-height: var(--leading-tight);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
  }
  
  .text-h2 {
    font-size: var(--font-size-2xl);
    line-height: var(--leading-snug);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
  }
  
  .text-h3 {
    font-size: var(--font-size-xl);
    line-height: var(--leading-snug);
    font-weight: 600;
    letter-spacing: var(--tracking-normal);
  }
  
  .text-h4 {
    font-size: var(--font-size-lg);
    line-height: var(--leading-normal);
    font-weight: 600;
    letter-spacing: var(--tracking-normal);
  }
  
  .text-h5 {
    font-size: var(--font-size-base);
    line-height: var(--leading-normal);
    font-weight: 600;
    letter-spacing: var(--tracking-normal);
  }
  
  .text-h6 {
    font-size: var(--font-size-sm);
    line-height: var(--leading-normal);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
  }
  
  /* Body text utilities */
  .text-body-xl {
    font-size: var(--font-size-xl);
    line-height: var(--leading-relaxed);
    font-weight: 400;
  }
  
  .text-body-lg {
    font-size: var(--font-size-lg);
    line-height: var(--leading-relaxed);
    font-weight: 400;
  }
  
  .text-body {
    font-size: var(--font-size-base);
    line-height: var(--leading-relaxed);
    font-weight: 400;
  }
  
  .text-body-sm {
    font-size: var(--font-size-sm);
    line-height: var(--leading-normal);
    font-weight: 400;
  }
  
  /* Utility text */
  .text-caption {
    font-size: var(--font-size-xs);
    line-height: var(--leading-normal);
    font-weight: 400;
  }
  
  .text-overline {
    font-size: var(--font-size-xs);
    line-height: var(--leading-normal);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
  }
  
  /* Weight modifiers - combine with size classes */
  .font-light { font-weight: 300; }
  .font-normal { font-weight: 400; }
  .font-medium { font-weight: 500; }
  .font-semibold { font-weight: 600; }
  .font-bold { font-weight: 700; }
  .font-extrabold { font-weight: 800; }
  .font-black { font-weight: 900; }
}

/* ============================================
   GLOBAL BASE STYLES
   Default semantic HTML styling
   ============================================ */

@layer base {
  html {
    font-size: var(--font-size-base);
    line-height: var(--leading-relaxed);
  }
  
  body {
    font-size: var(--font-size-base);
    line-height: var(--leading-relaxed);
  }
  
  h1 {
    font-size: var(--font-size-3xl);
    line-height: var(--leading-tight);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
  }
  
  h2 {
    font-size: var(--font-size-2xl);
    line-height: var(--leading-snug);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
  }
  
  h3 {
    font-size: var(--font-size-xl);
    line-height: var(--leading-snug);
    font-weight: 600;
  }
  
  h4 {
    font-size: var(--font-size-lg);
    line-height: var(--leading-normal);
    font-weight: 600;
  }
  
  h5 {
    font-size: var(--font-size-base);
    line-height: var(--leading-normal);
    font-weight: 600;
  }
  
  h6 {
    font-size: var(--font-size-sm);
    line-height: var(--leading-normal);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
  }
  
  p {
    font-size: var(--font-size-base);
    line-height: var(--leading-relaxed);
  }
  
  small {
    font-size: var(--font-size-sm);
  }
}

/* ============================================
   ALTERNATIVE TYPE SCALE PRESETS
   Comment/uncomment to try different scales
   ============================================ */

/* Perfect Fourth (1.333) - Moderate hierarchy
@theme {
  --fluid-min-ratio: 1.333;
  --fluid-max-ratio: 1.333;
}
*/

/* Augmented Fourth (1.414) - Strong hierarchy
@theme {
  --fluid-min-ratio: 1.414;
  --fluid-max-ratio: 1.414;
}
*/

/* Golden Ratio (1.618) - Dramatic hierarchy
@theme {
  --fluid-min-ratio: 1.618;
  --fluid-max-ratio: 1.618;
}
*/

/* Responsive ratios - Smaller on mobile, larger on desktop
@theme {
  --fluid-min-ratio: 1.2;    // Mobile
  --fluid-max-ratio: 1.5;    // Desktop
}
*/