/* =============================================================================
 * DesignDusk — canonical design tokens (site-wide)
 * -----------------------------------------------------------------------------
 * Single source of truth for brand color + type scale, per owner decisions
 * 2026-07-20 (typography unification):
 *   - navy #18244A, green #0AA91F (dark #078F19), body grey #53617B
 *     (= the approved product-page-v3 palette)
 *   - real font weights only (nothing above 700 — Sora loads 300–700)
 *   - hero H1 clamp(2.1rem, 3.6vw, 3.2rem), section H2 clamp(2rem, 3.3vw, 3rem)
 *   - eyebrow: .82rem / 700 / uppercase / .11em, green-dark
 *   - button: min-height 49px / radius 8px / weight 700
 *
 * Loaded site-wide. Consumers alias these inside their own scope with a
 * hex fallback, e.g.:  .dd-faqs { --dd-navy: var(--dd-brand-navy, #18244a); }
 * Per-page modules (home/custom/about/contact/blog) get repointed at these
 * tokens in the follow-up unification waves.
 * ============================================================================= */

:root {
  /* brand color */
  --dd-brand-green: #0aa91f;
  --dd-brand-green-dark: #078f19;
  --dd-brand-green-soft: #72df7d;   /* accent on dark/navy backgrounds */
  --dd-brand-navy: #18244a;
  --dd-brand-text: #53617b;         /* body copy on light backgrounds */
  --dd-brand-muted: #6b7486;
  --dd-brand-faint: #8a92a1;
  --dd-brand-line: rgba(24, 36, 74, .10);

  /* type scale */
  --dd-scale-h1: clamp(2.1rem, 3.6vw, 3.2rem);
  --dd-scale-h2: clamp(2rem, 3.3vw, 3rem);
  --dd-scale-eyebrow: .82rem;
}

/* =============================================================================
 * WAVE 1 — repoint the five page modules at the brand tokens (owner-approved
 * "all fonts uniform" directive, 2026-07-20).
 * The doubled-class selectors (.dd-home.dd-home) intentionally outrank each
 * module's own equal-specificity rules, which would otherwise win by load
 * order. Scope: brand colors, hero H1 scale + real 600 weight, section H2
 * scale (custom/about/contact/blog — homepage keeps its two-tier H2 sizes,
 * weight-normalized only), one eyebrow spec, one button spec, faux-bold
 * component weights (>700 requested, only 300–700 loaded) down to real 700.
 * Known residue (minor, next wave): unclassed inline links on the homepage
 * keep their authored 750/800 declarations.
 * ============================================================================= */

/* Sora is loaded at 300–700 only. Any styles requesting 750–900 were being
 * browser-synthesized (smeared fake bold). Disabling synthesis makes every
 * such request render the REAL nearest face (700) — the owner-approved
 * "normalize >700 down" decision, applied sitewide in one inherited rule. */
html { font-synthesis: none; }

/* Cross-page loop-card price component (renders on home + category pages) */
.dd-price-from.dd-price-from,
.dd-price-from.dd-price-from .woocommerce-Price-amount { font-weight: 700; }

/* ---------- homepage (dd-home) ---------- */
.dd-home.dd-home {
  --dd-home-green: var(--dd-brand-green);
  --dd-home-green-dark: var(--dd-brand-green-dark);
  --dd-home-navy: var(--dd-brand-navy);
  --dd-home-navy-2: var(--dd-brand-navy);
  --dd-home-ink: var(--dd-brand-navy);
  --dd-home-body: var(--dd-brand-text);
}
.dd-home.dd-home h1, .dd-home.dd-home h2, .dd-home.dd-home h3 { font-weight: 600; }
.dd-home.dd-home h1 { font-size: var(--dd-scale-h1); }
/* Hero background: owner 2026-07-20 — drop the cream block, match the white +
 * soft green-glow gradient the custom/about/contact/blog heroes use. */
.dd-home.dd-home .dd-home__hero {
  background: radial-gradient(circle at 90% 12%, rgba(10, 169, 31, .08), transparent 28%), #fff;
}
.dd-home.dd-home .dd-home__eyebrow {
  font-size: var(--dd-scale-eyebrow); font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; font-style: normal;
}
.dd-home.dd-home .dd-home__button { font-weight: 700; min-height: 49px; border-radius: 8px; }
.dd-home.dd-home .dd-home__badge,
.dd-home.dd-home .dd-home__method-label,
.dd-home.dd-home .dd-home__method-label--light,
.dd-home.dd-home .dd-home__step-num,
.dd-home.dd-home .dd-home__price-from,
.dd-home.dd-home .dd-home__testimonial-book,
.dd-home.dd-home p a,
.dd-home.dd-home li a,
.dd-home.dd-home em,
.dd-home.dd-home summary { font-weight: 700; }

/* ---------- custom (dd-custom) ---------- */
.dd-custom.dd-custom {
  --dd-green: var(--dd-brand-green);
  --dd-green-dark: var(--dd-brand-green-dark);
  --dd-navy: var(--dd-brand-navy);
  --dd-text: var(--dd-brand-text);
}
.dd-custom.dd-custom h1, .dd-custom.dd-custom h2, .dd-custom.dd-custom h3 { font-weight: 600; }
.dd-custom.dd-custom h1 { font-size: var(--dd-scale-h1); }
/* Owner 2026-07-20: hero had ~67px top padding vs About's ~24px — align to the
 * About hero's formula so the header-to-content gap matches across pages. */
.dd-custom.dd-custom .dd-custom__hero { padding-top: clamp(1.25rem, 2.5vw, 2.25rem); }
.dd-custom.dd-custom h2 { font-size: var(--dd-scale-h2); }
.dd-custom.dd-custom .dd-custom__label, .dd-custom.dd-custom .dd-custom__eyebrow {
  font-size: var(--dd-scale-eyebrow); font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; font-style: normal;
}
.dd-custom.dd-custom a { font-weight: 700; }
.dd-custom.dd-custom .dd-custom__button { font-weight: 700; min-height: 49px; border-radius: 8px; }
.dd-custom.dd-custom .dd-custom__package-badge,
.dd-custom.dd-custom .woocommerce-Price-amount,
.dd-custom.dd-custom summary { font-weight: 700; }

/* ---------- about (dd-about) ---------- */
.dd-about.dd-about {
  --dd-about-green: var(--dd-brand-green);
  --dd-about-green-dark: var(--dd-brand-green-dark);
  --dd-about-navy: var(--dd-brand-navy);
  --dd-about-text: var(--dd-brand-text);
}
.dd-about.dd-about h1, .dd-about.dd-about h2, .dd-about.dd-about h3 { font-weight: 600; }
.dd-about.dd-about h1 { font-size: var(--dd-scale-h1); }
.dd-about.dd-about h2 { font-size: var(--dd-scale-h2); }
.dd-about.dd-about .dd-about__label, .dd-about.dd-about .dd-about__eyebrow {
  font-size: var(--dd-scale-eyebrow); font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; font-style: normal;
}
.dd-about.dd-about .dd-about__card-number { font-weight: 700; }
.dd-about.dd-about .dd-about__button { font-weight: 700; min-height: 49px; border-radius: 8px; }

/* ---------- contact (dd-contact) ---------- */
.dd-contact.dd-contact {
  --dd-contact-green: var(--dd-brand-green);
  --dd-contact-green-dark: var(--dd-brand-green-dark);
  --dd-contact-navy: var(--dd-brand-navy);
  --dd-contact-text: var(--dd-brand-text);
}
.dd-contact.dd-contact h1, .dd-contact.dd-contact h2, .dd-contact.dd-contact h3 { font-weight: 600; }
.dd-contact.dd-contact h1 { font-size: var(--dd-scale-h1); }
.dd-contact.dd-contact h2 { font-size: var(--dd-scale-h2); }
.dd-contact.dd-contact .dd-contact__label, .dd-contact.dd-contact .dd-contact__eyebrow {
  font-size: var(--dd-scale-eyebrow); font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; font-style: normal;
}
.dd-contact.dd-contact a { font-weight: 700; }
.dd-contact.dd-contact .dd-contact__button { font-weight: 700; min-height: 49px; border-radius: 8px; }
.dd-contact.dd-contact label,
.dd-contact.dd-contact summary { font-weight: 700; }

/* ---------- blog index (dd-blog-index) ---------- */
.dd-blog-index.dd-blog-index {
  --dd-blog-green: var(--dd-brand-green);
  --dd-blog-green-dark: var(--dd-brand-green-dark);
  --dd-blog-navy: var(--dd-brand-navy);
  --dd-blog-text: var(--dd-brand-text);
}
.dd-blog-index.dd-blog-index h1, .dd-blog-index.dd-blog-index h2, .dd-blog-index.dd-blog-index h3 { font-weight: 600; }
.dd-blog-index.dd-blog-index h1 { font-size: var(--dd-scale-h1); }
.dd-blog-index.dd-blog-index h2 { font-size: var(--dd-scale-h2); }
.dd-blog-index.dd-blog-index .dd-blog-index__eyebrow,
.dd-blog-index.dd-blog-index .dd-blog-index__panel-label {
  font-size: var(--dd-scale-eyebrow); font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; font-style: normal;
}
.dd-blog-index.dd-blog-index .dd-blog-index__read-link,
.dd-blog-index.dd-blog-index .dd-blog-index__panel-number { font-weight: 700; }
.dd-blog-index.dd-blog-index .dd-blog-index__button { font-weight: 700; min-height: 49px; border-radius: 8px; }
