/* Welly family name rule, confirmed by Henry on 15 September 2026.
   Surface tokens keep every mention legible without adding a backing shape. */
:root {
  --welly-first-light: #111312;
  --welly-first-dark: #F7F3EB;
  --welly-gold-light: #80612B;
  --welly-gold-dark: #D6B77B;
  --welly-name-first: var(--welly-first-light);
  --welly-name-gold: var(--welly-gold-light);
}

.site-header, .site-footer, .hero, .page-head, .section-dark, .section-green,
.btn-dark, .btn-green, .welly-surface-dark {
  --welly-name-first: var(--welly-first-dark);
  --welly-name-gold: var(--welly-gold-dark);
}

.section-porcelain, .form-card, .my-parkwelly,
.btn:not(.btn-dark):not(.btn-green):not(.btn-outline), .welly-surface-light {
  --welly-name-first: var(--welly-first-light);
  --welly-name-gold: var(--welly-gold-light);
}

.welly-name {
  display: inline;
  white-space: nowrap;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
.welly-name-prefix { color: var(--welly-name-first); }
.welly-name-suffix { color: var(--welly-name-gold); }

/* A pale button keeps the bronze suffix readable at small text sizes. */
.my-parkwelly, .my-parkwelly:hover, .my-parkwelly:active,
.btn:has(.welly-name):not(.btn-dark):not(.btn-green):not(.btn-outline),
.btn:has(.welly-name):not(.btn-dark):not(.btn-green):not(.btn-outline):hover,
.btn:has(.welly-name):not(.btn-dark):not(.btn-green):not(.btn-outline):active {
  background: var(--porcelain);
  box-shadow: inset 0 0 0 1px var(--brass);
}

/* The large wordmarks use the same tokens as names within a sentence. */
.wordmark .park { color: var(--welly-name-first); }
.wordmark .welly { color: var(--welly-name-gold); }