/**
 * KS GLP-1 Carousel — site theme tokens
 *
 * Paste in Appearance → Customize → Additional CSS, or keep this file
 * enqueued by the plugin. Override --ks-theme-* on :root or a section wrapper.
 */

:root {
  /* Brand typography */
  --ks-theme-font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --ks-theme-font-subheading: "Sinar Grotesk", sans-serif;

  /* Brand palette */
  --ks-theme-ink: #061b28;
  --ks-theme-accent: #2a5464;
  --ks-theme-surface: #ececec;
  --ks-theme-line: rgba(6, 27, 40, 0.12);

  /* Card CTAs */
  --ks-theme-btn-font: "Sinar Grotesk", sans-serif;
  --ks-theme-btn-font-size: 0.625rem;
  --ks-theme-btn-font-weight: 700;
  --ks-theme-btn-letter-spacing: 0.08em;
  --ks-theme-btn-text-transform: uppercase;
  --ks-theme-btn-height: 34px;
  --ks-theme-btn-radius: 999px;

  --ks-theme-btn-primary-bg: var(--ks-theme-ink);
  --ks-theme-btn-primary-color: #ffffff;
  --ks-theme-btn-primary-border: var(--ks-theme-ink);
  --ks-theme-btn-primary-bg-hover: var(--ks-theme-accent);
  --ks-theme-btn-primary-border-hover: var(--ks-theme-accent);

  --ks-theme-btn-secondary-bg: rgba(255, 255, 255, 0.92);
  --ks-theme-btn-secondary-color: var(--ks-theme-ink);
  --ks-theme-btn-secondary-border: var(--ks-theme-line);
  --ks-theme-btn-secondary-bg-hover: #ffffff;
  --ks-theme-btn-secondary-color-hover: var(--ks-theme-ink);
  --ks-theme-btn-secondary-border-hover: var(--ks-theme-ink);

  /* Carousel nav — pill progress + matching circular arrows */
  --ks-theme-prog-shell-w: 88px;
  --ks-theme-prog-shell-h: 32px;
  --ks-theme-prog-shell-bg: var(--ks-theme-surface);
  --ks-theme-prog-shell-pad: 14px;
  --ks-theme-prog-h: 3px;
  --ks-theme-prog-track: rgba(26, 26, 26, 0.18);
  --ks-theme-prog-fill: #1a1a1a;

  --ks-theme-arrow-size: 40px;
  --ks-theme-arrow-radius: 999px;
  --ks-theme-arrow-bg: var(--ks-theme-surface);
  --ks-theme-arrow-next-bg: var(--ks-theme-surface);
  --ks-theme-arrow-bg-hover: #e2e2e2;
  --ks-theme-arrow-color: #1a1a1a;
  --ks-theme-arrow-border: transparent;
  --ks-theme-arrow-border-hover: transparent;
}

/* Optional: lighter scrim when photos are high-key / white-on-white */
.ks-el-root.ks-el-glp1-carousel {
  --gc-media-scrim: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.78) 24%,
    rgba(255, 255, 255, 0.2) 52%,
    rgba(255, 255, 255, 0) 68%
  );
}