/*
 * CG fluid type scale — both raw custom properties and ready-to-use classes.
 *
 * Extracted from wp-coefficient-giving/web/wp-content/themes/coefficient-giving/css/components/typography.css.
 *
 * The CG WP theme defines these as Tailwind v4 `@utility` rules. Here they
 * exist twice:
 *   1. As CSS custom properties (--cg-fs-*) usable inside Shadow DOM or any
 *      raw-CSS context.
 *   2. As .cg-text-* classes mirroring the theme's text-sans-* / text-serif-*
 *      utilities, for use in microsites that don't pull in Tailwind.
 *
 * Microsites built on Tailwind v4 should keep using the theme's existing
 * @utility names; this file is the no-Tailwind fallback.
 */

:where(:root, :host) {
  /* Sans sizes */
  --cg-fs-sans-xs: 11px;
  --cg-fs-sans-sm: 12px;
  --cg-fs-sans-md: clamp(14px, 13.1818px + 0.2273vw, 16px);
  --cg-fs-sans-lg: clamp(16px, 15.1818px + 0.2273vw, 18px);
  --cg-fs-sans-xl: clamp(24px, 22.3636px + 0.4545vw, 28px);

  /* Serif sizes */
  --cg-fs-serif-xs: 13px;
  --cg-fs-serif-sm: clamp(14px, 12.3636px + 0.4545vw, 18px);
  --cg-fs-serif-md: clamp(16px, 14.3636px + 0.4545vw, 20px);
  --cg-fs-serif-lg: clamp(21px, 18.1364px + 0.7955vw, 28px);
  --cg-fs-serif-xl: clamp(30px, 22.6364px + 2.0455vw, 48px);
  --cg-fs-serif-2xl: clamp(36px, 27.8182px + 2.2727vw, 56px);
  --cg-fs-serif-2xl-topper: clamp(36px, 27.8182px + 2.2727vw, 52px);
  --cg-fs-serif-3xl: clamp(44px, 32.5455px + 3.1818vw, 72px);
}

@media (min-width: 1200px) {
  :where(:root, :host) {
    --cg-fs-sans-xs: 12px;
    --cg-fs-sans-sm: 13px;
    --cg-fs-serif-xs: 14px;
  }
}

/* Sans utilities */
.cg-text-sans-xs {
  font-family: var(--cg-font-sans);
  font-size: var(--cg-fs-sans-xs);
  line-height: 140%;
}
.cg-text-sans-sm {
  font-family: var(--cg-font-sans);
  font-size: var(--cg-fs-sans-sm);
}
.cg-text-sans-md {
  font-family: var(--cg-font-sans);
  font-size: var(--cg-fs-sans-md);
}
@media (min-width: 1024px) {
  .cg-text-sans-md {
    line-height: 135%;
  }
}
.cg-text-sans-lg {
  font-family: var(--cg-font-sans);
  font-size: var(--cg-fs-sans-lg);
}
.cg-text-sans-xl {
  font-family: var(--cg-font-sans);
  font-size: var(--cg-fs-sans-xl);
  line-height: 120%;
}

/* Serif utilities */
.cg-text-serif-xs {
  font-family: var(--cg-font-serif);
  font-size: var(--cg-fs-serif-xs);
  line-height: 140%;
}
.cg-text-serif-sm {
  font-family: var(--cg-font-serif);
  font-size: var(--cg-fs-serif-sm);
  line-height: 150%;
  letter-spacing: -0.005em;
}
.cg-text-serif-md {
  font-family: var(--cg-font-serif);
  font-size: var(--cg-fs-serif-md);
  line-height: 120%;
  letter-spacing: -0.03375rem;
}
@media (min-width: 1024px) {
  .cg-text-serif-md {
    letter-spacing: -0.03938rem;
  }
}
.cg-text-serif-lg {
  font-family: var(--cg-font-serif);
  font-size: var(--cg-fs-serif-lg);
  line-height: 120%;
  letter-spacing: -0.045rem;
}
@media (min-width: 1024px) {
  .cg-text-serif-lg {
    letter-spacing: -0.05625rem;
  }
}
.cg-text-serif-xl {
  font-family: var(--cg-font-serif);
  font-size: var(--cg-fs-serif-xl);
  line-height: 95%;
  letter-spacing: -0.0675rem;
}
@media (min-width: 1024px) {
  .cg-text-serif-xl {
    letter-spacing: -0.08438rem;
  }
}
.cg-text-serif-2xl,
.cg-text-serif-2xl-topper,
.cg-text-serif-3xl {
  font-family: var(--cg-font-serif);
  line-height: 105%;
  letter-spacing: -0.0375em;
  font-feature-settings:
    "liga" 1,
    "kern" 1,
    "clig" 1;
  font-variant-ligatures: common-ligatures;
}
.cg-text-serif-2xl {
  font-size: var(--cg-fs-serif-2xl);
}
.cg-text-serif-2xl-topper {
  font-size: var(--cg-fs-serif-2xl-topper);
}
.cg-text-serif-3xl {
  font-size: var(--cg-fs-serif-3xl);
}