/* ==========================================================================
   GOLIVO — TYPOGRAPHY
   Fraunces = brand moments only (site hero, empty states, logo wordmark).
   Hanken Grotesk = everything else (nav, body, buttons, forms, footer).
   Requires golivo-tokens.css + golivo-fonts.css loaded first.
   ========================================================================== */

body.golivo-site,
.golivo-site body{
  font-family: var(--golivo-font-body);
  color: var(--golivo-text-primary);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---- Brand-moment display type (Fraunces) ---- */
.golivo-display{
  font-family: var(--golivo-font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 40;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--golivo-text-primary);
}

.golivo-hero-headline{
  font-family: var(--golivo-font-display) !important;
  font-weight: 500 !important;
  font-variation-settings: 'opsz' 60;
  font-size: clamp(34px, 4.2vw, 58px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.015em;
  color: var(--golivo-text-primary);
  margin: 0 0 20px;
}
/* !important here is deliberate: Elementor emits ID-scoped generated CSS
   for widget typography (e.g. .elementor-13 .elementor-element-xxxx h1)
   which otherwise beats a plain class selector regardless of load order. */

.golivo-section-empty-headline,
.golivo-onboarding-headline{
  font-family: var(--golivo-font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 32;
  font-size: 24px;
  line-height: 1.3;
}

.golivo-logo-wordmark{
  font-family: var(--golivo-font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 24;
  font-size: 16px;
  line-height: 1.3;
}

/* ---- Functional UI type (Hanken Grotesk) — never Fraunces below this line ---- */
.golivo-section-title{
  font-family: var(--golivo-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
}
.golivo-card-title{
  font-family: var(--golivo-font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
}
.golivo-body-text{
  font-family: var(--golivo-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
}
.golivo-table-text{
  font-family: var(--golivo-font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
}
.golivo-meta-text{
  font-family: var(--golivo-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: var(--golivo-text-secondary);
}
.golivo-button-text{
  font-family: var(--golivo-font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1;
}
.golivo-tag-text{
  font-family: var(--golivo-font-body);
  font-weight: 500;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* ---- Marketing-site scale (site body copy tends to run larger than the
   dense in-app scale — desktop app rules in section 2.2 are a floor, not
   a ceiling, for the website) ---- */
.golivo-hero-subhead{
  font-family: var(--golivo-font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--golivo-text-secondary);
  max-width: 560px;
}
.golivo-site h1{ font-family: var(--golivo-font-display); font-weight: 500; font-variation-settings: 'opsz' 60; }
.golivo-site h2{ font-family: var(--golivo-font-display); font-weight: 500; font-variation-settings: 'opsz' 40; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; }
.golivo-site h3{ font-family: var(--golivo-font-body); font-weight: 500; font-size: 20px; line-height: 1.35; }
.golivo-site p{ font-family: var(--golivo-font-body); font-weight: 400; font-size: 16px; line-height: 1.65; color: var(--golivo-text-secondary); }