/* ================================
   Stand Tall, Darling – Accent System
   Choice B: Black accents (soft-rounded)
   ===================================== */

/* 1) Global tokens */
:root {
  --std-black: #000000;
  --std-white: #ffffff;
  --std-pink: #E49DA8; /* <— update if your site pink differs */
  --std-radius: 8px;   /* soft-rounded */
  --std-focus: 2px;    /* focus ring width */
  --std-gap: 0.5rem;
}

/* 2) Base reset for “button-like” elements */
:where(button,
       input[type="button"],
       input[type="submit"],
       .button,
       .btn,
       [role="button"],
       .wp-block-button__link,
       a.button,
       a.wp-block-button__link) {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--std-gap);
  font: inherit;
  line-height: 1.2;
  padding: 0.8rem 1.25rem;
  border-radius: var(--std-radius);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease, transform .08s ease;
}

/* 3) Primary style: BLACK background, white text */
:where(button,
       input[type="button"],
       input[type="submit"],
       .button,
       .btn,
       .wp-block-button__link,
       a.button,
       a.wp-block-button__link) {
  background-color: var(--std-black);
  color: var(--std-white);
}

/* Hover/active states: flip to pink background, keep white text */
:where(button,
       input[type="button"],
       input[type="submit"],
       .button,
       .btn,
       .wp-block-button__link,
       a.button,
       a.wp-block-button__link):hover {
  background-color: var(--std-pink);
  color: var(--std-white);
}

:where(button,
       input[type="button"],
       input[type="submit"],
       .button,
       .btn,
       .wp-block-button__link,
       a.button,
       a.wp-block-button__link):active {
  transform: translateY(1px);
}

/* Disabled */
:where(button:disabled,
       input[type="button"]:disabled,
       input[type="submit"]:disabled,
       .button.disabled,
       .btn.disabled,
       .wp-block-button__link.disabled) {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* 4) Secondary/outline variant (if your theme uses .is-style-outline or .btn-outline) */
:where(.is-style-outline .wp-block-button__link,
       .btn-outline,
       a.btn-outline) {
  background: transparent;
  color: var(--std-black);
  border: 1.5px solid var(--std-black);
}

:where(.is-style-outline .wp-block-button__link,
       .btn-outline,
       a.btn-outline):hover {
  background: var(--std-black);
  color: var(--std-white);
  border-color: var(--std-black);
}

/* 5) Link + accent text rules (black-first, pink on hover) */
:where(a) {
  color: var(--std-black);
  text-underline-offset: 2px;
}

:where(a:hover) {
  color: var(--std-pink);
}

/* Optional accent utility for headings, labels, small highlights */
:where(.accent, .has-accent-color) { color: var(--std-black); }
:where(.accent--pink) { color: var(--std-pink); }

/* 6) Focus visibility (accessible, brand-aligned) */
:where(a, button, input[type="button"], input[type="submit"],
       .button, .btn, .wp-block-button__link, [role="button"]) {
  outline: none;
}

:where(a, button, input[type="button"], input[type="submit"],
       .button, .btn, .wp-block-button__link, [role="button"]):focus-visible {
  box-shadow:
    0 0 0 var(--std-focus) var(--std-white),
    0 0 0 calc(var(--std-focus) * 2) var(--std-black);
  border-radius: var(--std-radius);
}

/* 7) Forms: submit inputs look like buttons */
:where(input[type="submit"]) {
  background-color: var(--std-black);
  color: var(--std-white);
  border-radius: var(--std-radius);
}
:where(input[type="submit"]:hover) {
  background-color: var(--std-pink);
}

/* 8) WP block buttons: ensure consistent radius and spacing */
:where(.wp-block-button .wp-block-button__link) {
  border-radius: var(--std-radius);
  padding: 0.9rem 1.3rem;
}

/* 9) “Ghost” buttons (if used) */
:where(.btn-ghost, a.btn-ghost) {
  background: transparent;
  color: var(--std-black);
}
:where(.btn-ghost:hover, a.btn-ghost:hover) {
  background: rgba(0,0,0,.06);
  color: var(--std-black);
}

/* 10) Inverted sections (dark hero/footer) — keep B theme but ensure contrast */
:where(.has-dark-background, .is-style-invert, footer, .site-footer) :where(a) {
  color: var(--std-pink);
}
:where(.has-dark-background, .is-style-invert, footer, .site-footer) :where(a:hover) {
  color: var(--std-white);
}
:where(.has-dark-background, .is-style-invert, footer, .site-footer)
:where(button, .btn, .wp-block-button__link, a.button, a.wp-block-button__link) {
  background: var(--std-pink);
  color: var(--std-white);
}
:where(.has-dark-background, .is-style-invert, footer, .site-footer)
:where(button:hover, .btn:hover, .wp-block-button__link:hover, a.button:hover, a.wp-block-button__link:hover) {
  background: var(--std-white);
  color: var(--std-black);
}

/* 11) Pills (optional utility) */
:where(.pill) { border-radius: 999px; }

/* 12) Icon-only buttons (round) */
:where(.btn-icon) {
  width: 2.5rem; height: 2.5rem; padding: 0;
  border-radius: 50%;
}