/* ============================================================
   Block style variations — Layer 0 primitives.
   Registered in functions.php (register_block_style); the look
   maps each .is-style-* class to the design-system tokens defined
   in colors_and_type.css. Pickable in the Site Editor, reused
   across every section. Higher specificity than theme.json so the
   variation wins over core defaults.
   ============================================================ */

/* ---- core/paragraph variations ---- */

/* Eyebrow — uppercase micro-label above headings (used in every section). */
p.is-style-eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--ink-3);
  line-height: var(--lh-snug);
  margin-bottom: 14px;
}

/* Mono — Geist Mono for specs / numbers / counts. */
p.is-style-mono {
  font-family: var(--font-mono);
  letter-spacing: 0;
}

/* ---- core/button variations ----
   The style class sits on the .wp-block-button wrapper; we style the
   inner __link so it overrides theme.json's button element styles. */

/* Ghost light — translucent glass CTA for dark/photo backgrounds (hero). */
.wp-block-button.is-style-ghost-light .wp-block-button__link {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.wp-block-button.is-style-ghost-light .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

/* Outline — white field, ink text, hairline border (secondary CTA on light). */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line-2);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--paper-2);
  border-color: var(--line-3);
  color: var(--ink);
}

/* Text link — no fill, brand color, "see all →" style head links. */
.wp-block-button.is-style-text-link .wp-block-button__link {
  background: transparent;
  color: var(--brand-500);
  border: 0;
  padding: 8px 6px;
  font-weight: 500;
}
.wp-block-button.is-style-text-link .wp-block-button__link:hover {
  color: var(--brand-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}