/* ==========================================================================
   Amzlify design system
   Tokens and base component styles. No layout, no page-specific rules.
   Load order: GeneratePress parent, then this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted variable files, swap so text paints immediately
   Files expected at /assets/fonts/. Subset to latin + latin-ext before upload.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable.woff2") format("woff2-variations"),
       url("../fonts/inter-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-variable.woff2") format("woff2-variations"),
       url("../fonts/playfair-display-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-italic-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {

  /* --- Colour: brand ---------------------------------------------------- */
  --ink:            #0F172A;
  --teal:           #00a385;   /* brand accent. 3.19:1 on white */
  --teal-bright:    #2dd4bf;   /* dark backgrounds only */
  --teal-deep:      #0d9488;   /* 3.39:1 on white */
  --gold:           #f2c94c;   /* proof badges only, never as text */
  --body:           #334155;
  --muted:          #64748B;   /* 4.76:1 on white, safe for small text */

  /* --- Colour: derived --------------------------------------------------
     --teal-800 is the only shade added to your palette. The three brand
     teals sit between 3.19:1 and 3.39:1 on white, which clears AA for
     large text and UI borders but fails it for body text and for white
     text on a filled button. --teal-800 is 5.06:1 and is used for exactly
     those two jobs. Brand teal stays for borders, icons, display type
     and anything 24px or larger.
     --------------------------------------------------------------------- */
  --teal-800:       #0a7d6b;
  --teal-900:       #075a4d;   /* hover/active on filled buttons */
  --teal-tint:      #e6f6f2;   /* quiet fills, never behind small text alone */

  --white:          #ffffff;
  --surface:        #ffffff;
  --surface-sunken: #f8fafc;
  --line:           #e2e8f0;
  --line-strong:    #cbd5e1;

  /* Dark band — proof band and final CTA only */
  --navy:           #101a3d;
  --navy-deep:      #0a0e27;
  --navy-text:      #e2e7f6;
  --navy-muted:     #aab4d6;

  /* State */
  --danger:         #b42318;
  --focus-ring:     var(--ink);
  --focus-ring-dark: var(--teal-bright);

  /* --- Type ------------------------------------------------------------- */
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid from 360px to 1440px viewport */
  --text-xs:  clamp(0.875rem, 0.854rem + 0.09vw, 0.9375rem);  /* 14 → 15 */
  --text-sm:  clamp(0.9375rem, 0.906rem + 0.14vw, 1rem);      /* 15 → 16 */
  --text-base: clamp(1rem, 0.958rem + 0.19vw, 1.125rem);      /* 16 → 18 */
  --text-md:  clamp(1.1875rem, 1.083rem + 0.46vw, 1.5rem);    /* 19 → 24 */
  --text-lg:  clamp(1.4375rem, 1.25rem + 0.83vw, 2rem);       /* 23 → 32 */
  --text-xl:  clamp(1.6875rem, 1.354rem + 1.48vw, 2.6875rem); /* 27 → 43 */
  --text-2xl: clamp(2rem, 1.458rem + 2.41vw, 3.625rem);       /* 32 → 58 */
  --text-3xl: clamp(2.375rem, 1.583rem + 3.52vw, 4.75rem);    /* 38 → 76 */

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.65;
  --leading-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-flat:  0;
  --tracking-wide:  0.02em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  --measure: 66ch;        /* body copy line length */
  --measure-tight: 22ch;  /* display headlines */

  /* --- Space (4px base) -------------------------------------------------- */
  --space-3xs: 0.25rem;   /* 4  */
  --space-2xs: 0.5rem;    /* 8  */
  --space-xs:  0.75rem;   /* 12 */
  --space-sm:  1rem;      /* 16 */
  --space-md:  1.5rem;    /* 24 */
  --space-lg:  2rem;      /* 32 */
  --space-xl:  3rem;      /* 48 */
  --space-2xl: 4rem;      /* 64 */
  --space-3xl: 6rem;      /* 96 */
  --space-4xl: 8rem;      /* 128 */

  /* Section rhythm, fluid */
  --space-section: clamp(3.5rem, 2rem + 6.67vw, 7.5rem);

  /* --- Radii ------------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* --- Borders and elevation ---------------------------------------------
     One shadow, used sparingly. Flat cards with a real border read as
     considered; a soft grey shadow under every box does not.
     --------------------------------------------------------------------- */
  --border-hair: 1px;
  --border-firm: 1.5px;
  --shadow-lift: 0 2px 4px rgba(15, 23, 42, 0.04),
                 0 12px 28px rgba(15, 23, 42, 0.07);

  /* --- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--white);
  color: var(--body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--ink);
  font-weight: var(--weight-semi);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  margin: 0 0 var(--space-md);
}

h1 { font-size: var(--text-2xl); max-width: var(--measure-tight); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); line-height: var(--leading-snug); }
h4 { font-size: var(--text-md); line-height: var(--leading-snug); }

p  { margin: 0 0 var(--space-md); max-width: var(--measure); }

.lead {
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  color: var(--body);
}

a {
  color: var(--teal-800);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--duration-fast) var(--ease);
}

a:hover { color: var(--teal-900); }

hr {
  border: 0;
  border-top: var(--border-hair) solid var(--line);
  margin: var(--space-xl) 0;
}

/* --------------------------------------------------------------------------
   4. Focus — one ring everywhere, WCAG AA non-text contrast
   Ink on white is 15.6:1; the white halo keeps the ring visible when the
   control sits on a tinted or dark fill.
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.is-dark :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--focus-ring-dark);
}

/* Remove the ring for pointer users only, never for keyboard */
:where(a, button, input, select, textarea):focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 48px;
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  line-height: 1.2;
  letter-spacing: var(--tracking-flat);
  text-decoration: none;
  border-radius: var(--radius-md);
  border: var(--border-firm) solid transparent;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease),
              border-color var(--duration-base) var(--ease),
              color var(--duration-base) var(--ease);
}

.btn--primary {
  background: var(--teal-800);   /* 5.06:1 against white label text */
  border-color: var(--teal-800);
  color: var(--white);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--teal-900);
  border-color: var(--teal-900);
  color: var(--white);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--teal-800);
  color: var(--teal-800);
}

.is-dark .btn--ghost {
  border-color: rgba(226, 231, 246, 0.35);
  color: var(--navy-text);
}

.is-dark .btn--ghost:hover {
  border-color: var(--teal-bright);
  color: var(--teal-bright);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   6. Card
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: var(--border-hair) solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.card > :last-child { margin-bottom: 0; }

.card__title {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  color: var(--ink);
  margin: 0 0 var(--space-2xs);
}

/* Only cards that are themselves links get a hover state */
a.card,
.card--link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-base) var(--ease);
}

a.card:hover,
.card--link:hover { border-color: var(--teal); }

.card--flush { padding: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   7. Stat block
   The context line is not optional. No figure ships without its marketplace
   and the period it covers.
   -------------------------------------------------------------------------- */

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding-left: var(--space-md);
  border-left: 3px solid var(--teal);
}

.stat__figure {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--tracking-tight);
}

.stat__label {
  font-size: var(--text-sm);
  color: var(--body);
}

.stat__context {
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: var(--tracking-wide);
}

.is-dark .stat { border-left-color: var(--teal-bright); }
.is-dark .stat__figure { color: var(--white); }
.is-dark .stat__label { color: var(--navy-text); }
.is-dark .stat__context { color: var(--navy-muted); }

/* --------------------------------------------------------------------------
   8. Eyebrow label
   Sentence case by default. A tracked-out all-caps label above every heading
   is the fastest way to make a page look like a template. Add .eyebrow--caps
   deliberately if a specific section needs it.
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  color: var(--teal-800);
  margin-bottom: var(--space-2xs);
}

.eyebrow::before {
  content: "";
  width: 20px;
  height: 2px;
  background: var(--teal);
  flex: none;
}

.eyebrow--caps { text-transform: uppercase; letter-spacing: 0.08em; }

.is-dark .eyebrow { color: var(--teal-bright); }
.is-dark .eyebrow::before { background: var(--teal-bright); }

/* --------------------------------------------------------------------------
   9. Badge
   Gold is reserved for verified proof. Ink on gold is 10.8:1.
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-xs);
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  line-height: 1.3;
  border-radius: var(--radius-pill);
  border: var(--border-hair) solid transparent;
}

.badge--proof {
  background: var(--gold);
  color: var(--ink);
}

.badge--quiet {
  background: var(--teal-tint);
  color: var(--teal-900);
  border-color: rgba(10, 125, 107, 0.2);
}

.badge--outline {
  background: transparent;
  color: var(--body);
  border-color: var(--line-strong);
}

/* --------------------------------------------------------------------------
   10. Forms
   -------------------------------------------------------------------------- */

.field { display: block; margin-bottom: var(--space-md); }

.field__label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--ink);
  margin-bottom: var(--space-3xs);
}

.field__hint {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--space-3xs);
}

.input,
.select,
.textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
  width: 100%;
  min-height: 48px;
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--ink);
  background: var(--white);
  border: var(--border-hair) solid var(--line-strong);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease);
}

textarea { min-height: 8rem; line-height: var(--leading-body); resize: vertical; }

.input::placeholder,
textarea::placeholder { color: var(--muted); opacity: 1; }

.input:hover,
select:hover,
textarea:hover { border-color: var(--muted); }

.input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] { border-color: var(--danger); }

.field__error {
  display: block;
  font-size: var(--text-xs);
  color: var(--danger);
  margin-top: var(--space-3xs);
}

/* Select — native caret replaced, still a native select underneath */
select,
.select {
  appearance: none;
  padding-right: var(--space-xl);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%230F172A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  background-size: 14px 9px;
  cursor: pointer;
}

/* Checkbox */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--body);
  cursor: pointer;
}

.checkbox input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.15em 0 0;
  background: var(--white);
  border: var(--border-firm) solid var(--line-strong);
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}

.checkbox input[type="checkbox"]:hover { border-color: var(--muted); }

.checkbox input[type="checkbox"]:checked {
  background-color: var(--teal-800);
  border-color: var(--teal-800);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10' fill='none'%3E%3Cpath d='M1 5l3.5 3.5L12 1' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 10px;
}

/* --------------------------------------------------------------------------
   11. Dark band — proof band and final CTA only
   -------------------------------------------------------------------------- */

.is-dark {
  background: radial-gradient(120% 120% at 50% 0%, var(--navy) 0%, var(--navy-deep) 100%);
  color: var(--navy-text);
}

.is-dark h1,
.is-dark h2,
.is-dark h3,
.is-dark h4 { color: var(--white); }

.is-dark a { color: var(--teal-bright); }

/* --------------------------------------------------------------------------
   12. Utilities
   -------------------------------------------------------------------------- */

.u-measure { max-width: var(--measure); }
.u-muted   { color: var(--muted); }
.u-nowrap  { white-space: nowrap; }

.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 999;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   13. Reduced motion — kills everything, including parent theme and plugin
   animations and smooth scrolling.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  html:focus-within { scroll-behavior: auto !important; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
    background-attachment: initial !important;
  }

  video[autoplay] { display: none; }
}

/* --------------------------------------------------------------------------
   14. Breadcrumbs
   Small, quiet, and always visible — they are navigation, not decoration.
   -------------------------------------------------------------------------- */

.breadcrumbs { margin-bottom: var(--space-md); }

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  color: var(--muted);
}

.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/";
  margin-right: var(--space-2xs);
  color: var(--line-strong);
}

.breadcrumbs__item a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.breadcrumbs__item a:hover {
  color: var(--teal-800);
  border-bottom-color: currentColor;
}

.breadcrumbs__item [aria-current="page"] { color: var(--body); }

/* --------------------------------------------------------------------------
   15. Comparison table — used on /marketplaces/
   Row headers stay visible on narrow screens; the table scrolls sideways
   rather than reflowing into unreadable stacks.
   -------------------------------------------------------------------------- */

.compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare {
  width: 100%;
  min-width: 42rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
  text-align: left;
}

.compare th,
.compare td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-hair) solid var(--line);
  vertical-align: top;
}

.compare thead th {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  color: var(--ink);
  border-bottom: 2px solid var(--teal);
}

.compare tbody th {
  font-weight: var(--weight-semi);
  color: var(--ink);
  background: var(--surface-sunken);
  width: 12rem;
}

/* --------------------------------------------------------------------------
   16. Layout — section rhythm and grids used by the block patterns
   -------------------------------------------------------------------------- */

.section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.section--hero {
  padding-top: clamp(3rem, 1.5rem + 6vw, 6rem);
  padding-bottom: clamp(3rem, 1.5rem + 6vw, 6rem);
}

.section--tight {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

/* Two light sections in a row should not double their padding */
.section + .section:not(.is-dark) { padding-top: 0; }

.hero__title { max-width: var(--measure-tight); }
.hero__actions { margin-top: var(--space-lg); }

.grid {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

@media (min-width: 40em) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 62em) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.card--link .card__title { display: block; margin-bottom: var(--space-2xs); }

.stat-row { margin-top: var(--space-xl); }
.wp-block-columns .stat { height: 100%; }

.list-check { padding-left: 0; list-style: none; max-width: var(--measure); }

.list-check li {
  position: relative;
  padding-left: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.list-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--teal);
}

/* --------------------------------------------------------------------------
   17. FAQ — native details/summary, no JavaScript
   -------------------------------------------------------------------------- */

.faq { max-width: var(--measure); margin-top: var(--space-lg); }

.faq__item {
  border-bottom: var(--border-hair) solid var(--line);
  padding: var(--space-sm) 0;
}

.faq__q {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
  content: "+";
  font-weight: var(--weight-regular);
  color: var(--teal-800);
  flex: none;
}

.faq__item[open] .faq__q::after { content: "\\2212"; }

.faq__a { padding-top: var(--space-2xs); }
.faq__a p { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   18. Review stamp — required under any compliance content
   -------------------------------------------------------------------------- */

.review-stamp {
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   19. Core block compatibility
   The core button block puts className on the wrapper div, not the anchor, so
   the component styles are mirrored onto the inner link here.
   KEEP IN SYNC WITH SECTION 5. Change a button style there, change it here.
   -------------------------------------------------------------------------- */

.wp-block-button.btn > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--radius-md);
  border: var(--border-firm) solid transparent;
  transition: background-color var(--duration-base) var(--ease),
              border-color var(--duration-base) var(--ease),
              color var(--duration-base) var(--ease);
}

.wp-block-button.btn--primary > .wp-block-button__link {
  background: var(--teal-800);
  border-color: var(--teal-800);
  color: var(--white);
}

.wp-block-button.btn--primary > .wp-block-button__link:hover,
.wp-block-button.btn--primary > .wp-block-button__link:focus-visible {
  background: var(--teal-900);
  border-color: var(--teal-900);
  color: var(--white);
}

.wp-block-button.btn--ghost > .wp-block-button__link {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}

.wp-block-button.btn--ghost > .wp-block-button__link:hover,
.wp-block-button.btn--ghost > .wp-block-button__link:focus-visible {
  border-color: var(--teal-800);
  color: var(--teal-800);
}

.is-dark .wp-block-button.btn--ghost > .wp-block-button__link {
  border-color: rgba(226, 231, 246, 0.35);
  color: var(--navy-text);
}

.is-dark .wp-block-button.btn--ghost > .wp-block-button__link:hover {
  border-color: var(--teal-bright);
  color: var(--teal-bright);
}