/* Typography Scale - M2AI Real Estate */
/* Base 16px - WCAG AAA Compliant Typography System */

:root {
  /* Font Sizes - Standardized Scale */
  --text-xs: 0.875rem;    /* 14px - Small labels, metadata */
  --text-sm: 1rem;        /* 16px - Minimum body text */
  --text-base: 1.125rem;  /* 18px - Standard body text */
  --text-lg: 1.25rem;     /* 20px - Large body, important text */
  --text-xl: 1.5rem;      /* 24px - H4 headings */
  --text-2xl: 1.875rem;   /* 30px - H3 headings */
  --text-3xl: 2.25rem;    /* 36px - H2 headings */
  --text-4xl: 3rem;       /* 48px - H1 headings */

  /* Line Heights for Readability */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  --leading-loose: 2;

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
}

/* Apply Standardized Typography */
body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: #1e293b;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Heading Hierarchy */
h1, .h1 {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  font-weight: var(--font-extrabold);
  margin-bottom: 1rem;
}

h2, .h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  font-weight: var(--font-bold);
  margin-bottom: 1rem;
}

h3, .h3 {
  font-size: var(--text-2xl);
  line-height: var(--leading-normal);
  font-weight: var(--font-bold);
  margin-bottom: 0.75rem;
}

h4, .h4 {
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  font-weight: var(--font-semibold);
  margin-bottom: 0.75rem;
}

h5, .h5 {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  font-weight: var(--font-semibold);
  margin-bottom: 0.5rem;
}

h6, .h6 {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--font-semibold);
  margin-bottom: 0.5rem;
}

/* Body Text */
p, .body-text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin-bottom: 1rem;
}

/* Large Body Text */
.text-large {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

/* Small Text - Use Sparingly */
.text-small, small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* Extra Small - Metadata Only */
.text-xs {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

/* Ensure Quotes Stand Out */
.case-study-quote,
.mini-quote,
blockquote {
  font-size: var(--text-lg) !important;
  line-height: var(--leading-relaxed) !important;
  font-weight: var(--font-medium);
  color: #1e293b;
}

.case-study-quote::before {
  font-size: 5rem !important;
  opacity: 0.15;
  line-height: 1;
}

/* Subheadlines - Larger and More Readable */
.subheadline {
  font-size: var(--text-lg) !important;
  line-height: var(--leading-relaxed) !important;
  font-weight: var(--font-normal);
  color: #334155; /* Updated for accessibility */
}

/* Section Titles Standardization */
.section-title {
  font-size: var(--text-3xl) !important;
  line-height: var(--leading-tight) !important;
  font-weight: var(--font-bold);
  color: #1e293b;
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: var(--text-lg) !important;
  line-height: var(--leading-relaxed) !important;
  color: #475569; /* Updated for accessibility */
  margin-bottom: 1.5rem;
}

/* Feature/Service Titles */
.service-title,
.feature-title {
  font-size: var(--text-xl) !important;
  line-height: var(--leading-normal) !important;
  font-weight: var(--font-bold);
  color: #1e293b;
}

/* Form Labels - Consistent Sizing */
.form-label,
label {
  font-size: var(--text-sm) !important;
  line-height: var(--leading-normal) !important;
  font-weight: var(--font-semibold);
  color: #1e293b;
}

/* Stats and Numbers - Make Them Pop */
.stat-number {
  font-size: clamp(2rem, 4vw, 2.5rem) !important;
  line-height: var(--leading-tight) !important;
  font-weight: var(--font-extrabold);
  color: #f97316;
}

.stat-label {
  font-size: var(--text-sm) !important;
  line-height: var(--leading-normal) !important;
  font-weight: var(--font-medium);
  color: #475569; /* Updated for accessibility */
}

/* Button Text */
.cta-button,
.primary-cta,
.secondary-cta,
.form-button {
  font-size: var(--text-lg) !important;
  line-height: var(--leading-normal) !important;
  font-weight: var(--font-bold);
}

/* Mobile Typography Adjustments */
@media (max-width: 768px) {
  :root {
    --text-4xl: 2rem;      /* Scale down h1 */
    --text-3xl: 1.75rem;   /* Scale down h2 */
    --text-2xl: 1.5rem;    /* Scale down h3 */
    --text-xl: 1.25rem;    /* Scale down h4 */
  }

  body {
    font-size: var(--text-sm); /* Slightly smaller base on mobile */
  }

  .subheadline {
    font-size: var(--text-base) !important;
  }

  .case-study-quote,
  .mini-quote {
    font-size: var(--text-base) !important;
  }
}

/* Extra Small Devices */
@media (max-width: 390px) {
  :root {
    --text-4xl: 1.75rem;
    --text-3xl: 1.5rem;
    --text-2xl: 1.25rem;
  }
}

/* Improve Readability with Proper Line Length */
p,
.body-text,
.case-study-quote,
blockquote {
  max-width: 70ch; /* Optimal reading width */
}

/* Prevent Orphans and Improve Text Flow */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance; /* Modern CSS for better heading flow */
}

p {
  text-wrap: pretty; /* Modern CSS for better paragraph flow */
}

/* Link Styling for Better Readability */
a {
  color: #1d4ed8;
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.2em;
}

a:hover {
  color: #1e40af;
}