/* ===== ColorFixers Global Typography =====
 * Headings: DM Serif Display
 * Body/UI:   DM Sans
 * Unified sizes across all pages + Elementor content
 */

:root {
  --cf-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cf-font-heading: 'DM Serif Display', Georgia, 'Times New Roman', serif;

  /* Brand + layout (single source of truth — do not redefine per page) */
  --cf-brand-primary: #0091CD;
  --cf-brand-primary-dark: #0076A8;
  --cf-brand-primary-darker: #005A82;
  --cf-brand-dark: #0A1628;
  --cf-brand-accent-light: #7DD3FC;
  --cf-section-bg: #F7F9FB;
  --cf-border: #E8ECF0;
  --cf-text: #1A1A1A;
  --cf-text-secondary: #555;
  --cf-text-muted: #6B6B6B;
  --cf-header-offset: 102px;
  --cf-header-offset-admin: 134px;

  --cf-text-base: 16px;
  --cf-text-sm: 14px;
  --cf-text-xs: 12px;
  --cf-text-lg: 17px;
  --cf-text-btn: 15px;

  --cf-h1: 48px;
  --cf-h2: 40px;
  --cf-h3: 22px;
  --cf-h4: 18px;
  --cf-h5: 16px;
  --cf-h6: 14px;

  --cf-line-body: 1.65;
  --cf-line-heading: 1.15;
}

/* --- Base --- */
body,
button,
input,
select,
textarea,
label,
.elementor-button,
.elementor-nav-menu a {
  font-family: var(--cf-font-body) !important;
}

body {
  font-size: var(--cf-text-base) !important;
  line-height: var(--cf-line-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p,
li,
td,
th,
blockquote,
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: var(--cf-font-body) !important;
  font-size: var(--cf-text-base) !important;
  line-height: var(--cf-line-body) !important;
}

/* --- Headings (semantic + theme classes) --- */
h1,
h2,
h3,
h4,
h5,
h6,
.cf-h1,
.cf-h2,
.cf-h3,
.cf-section-title,
.cf-cta-title,
[class*='-hero-title'],
.featured-title,
.article-title,
.cf-form-title,
.cf-plan-name,
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--cf-font-heading) !important;
  font-weight: 400 !important;
  line-height: var(--cf-line-heading) !important;
}

h1,
.cf-h1,
[class*='-hero-title'],
.featured-title,
.article-title,
.cf-form-title,
.elementor-widget-heading h1.elementor-heading-title {
  font-size: var(--cf-h1) !important;
}

h2,
.cf-h2,
.cf-section-title,
.cf-cta-title,
.cf-plan-name,
.elementor-widget-heading h2.elementor-heading-title {
  font-size: var(--cf-h2) !important;
}

h3,
.cf-h3,
.blog-card-title,
.elementor-widget-heading h3.elementor-heading-title {
  font-size: var(--cf-h3) !important;
}

h4,
.cf-h4,
.elementor-widget-heading h4.elementor-heading-title {
  font-size: var(--cf-h4) !important;
}

h5,
.cf-h5,
.elementor-widget-heading h5.elementor-heading-title {
  font-size: var(--cf-h5) !important;
}

h6,
.cf-h6,
.elementor-widget-heading h6.elementor-heading-title {
  font-size: var(--cf-h6) !important;
}

/* --- UI / labels --- */
.cf-section-label,
[class*='-hero-badge'],
[class*='-badge']:not(.featured-badge) {
  font-family: var(--cf-font-body) !important;
  font-size: var(--cf-text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[class*='-hero-subtitle'],
.cf-section-desc,
[class*='-form-desc'] {
  font-family: var(--cf-font-body) !important;
  font-size: var(--cf-text-lg) !important;
  line-height: var(--cf-line-body) !important;
}

.cf-btn,
[class*='-btn']:not(.cf-topbar-btn),
button[type='submit'],
input[type='submit'],
.elementor-button,
.elementor-button-text {
  font-family: var(--cf-font-body) !important;
  font-size: var(--cf-text-btn) !important;
  font-weight: 600 !important;
}

small,
.cf-text-sm,
.blog-card-date,
.blog-card-readtime,
.article-meta-date,
.article-meta-readtime {
  font-size: var(--cf-text-sm) !important;
}

/* --- Page shells inherit body font --- */
#cf-home-main,
#cf-price-main,
#cf-contact-main,
#cf-blog-main,
#cf-freetrial-main,
.cf-blog,
.cf-services-page,
.cf-about-page,
.cf-portfolio-page,
main[id^='cf-'] {
  font-family: var(--cf-font-body) !important;
  font-size: var(--cf-text-base) !important;
}

/* --- Elementor page content --- */
.elementor-page .elementor-widget-container,
.elementor-page .e-con,
.elementor-page .elementor-widget-text-editor {
  font-family: var(--cf-font-body) !important;
}

.elementor-page .elementor-widget-heading .elementor-heading-title {
  font-family: var(--cf-font-heading) !important;
}

/* --- Responsive (same scale, smaller) --- */
@media (max-width: 768px) {
  :root {
    --cf-h1: 34px;
    --cf-h2: 32px;
    --cf-h3: 20px;
    --cf-h4: 17px;
    --cf-text-base: 16px;
    --cf-text-lg: 16px;
  }
}

@media (max-width: 480px) {
  :root {
    --cf-h1: 28px;
    --cf-h2: 26px;
    --cf-h3: 18px;
  }
}