/* ============================================================
   MAHIRA PREMIUM | TYPOGRAPHY
   ============================================================
   Purpose: Defines all text styles and font sizing
   Editable: Yes
   Dependencies: variables.css, reset.css
   ============================================================ */

/* Fluid Typography */
:root {
  --fluid-min-width: 320;
  --fluid-max-width: 1920;
  
  --font-size-xs: clamp(0.75rem, 0.5rem + 0.25vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 0.75rem + 0.125vw, 1rem);
  --font-size-base: clamp(1rem, 0.875rem + 0.25vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 0.9375rem + 0.375vw, 1.375rem);
  --font-size-xl: clamp(1.5rem, 1.125rem + 0.75vw, 2rem);
  --font-size-2xl: clamp(2rem, 1.5rem + 1vw, 2.5rem);
  --font-size-3xl: clamp(2.5rem, 1.75rem + 1.5vw, 3.5rem);
  --font-size-4xl: clamp(3rem, 2rem + 2vw, 4.5rem);
}

body {
  font-size: var(--font-size-base);
}

h1, .h1 {
  font-size: var(--font-size-4xl);
  font-family: var(--font-secondary);
  font-weight: 400;
  letter-spacing: -0.02em;
}

h2, .h2 {
  font-size: var(--font-size-3xl);
  font-family: var(--font-secondary);
  font-weight: 400;
  letter-spacing: -0.01em;
}

h3, .h3 {
  font-size: var(--font-size-2xl);
  font-family: var(--font-secondary);
  font-weight: 400;
}

h4, .h4 {
  font-size: var(--font-size-xl);
  font-family: var(--font-secondary);
  font-weight: 400;
}

h5, .h5 {
  font-size: var(--font-size-lg);
  font-family: var(--font-primary);
  font-weight: 500;
}

h6, .h6 {
  font-size: var(--font-size-base);
  font-family: var(--font-primary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

p {
  margin-bottom: var(--spacing-md);
  color: var(--text-secondary);
}

.text-gold { color: var(--accent-gold); }
.text-brown { color: var(--brown-dark); }
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }