/* ═══════════════════════════════════════════════════════════════
   D4D Site Platform — buttons
   Gertsen's button, tokenized. Pill (or hard corner) comes from
   --r-control — the soft/sharp radius theme, never a local value.
   Sheen wipe and lift are motion-safe enhancements only.
   Requires tokens.css.

   Variants: .btn--accent (default look) · .btn--cta (gold) ·
             .btn--ghost (on dark) · .btn--sm · .btn--full

   AA check (computed against tokens.css defaults, WCAG 2.x):
     --white on --accent #9C2088 ..................... 7.06:1  PASS
     --gold-ink #2A1B00 on --gold #D9A21B ............ 7.28:1  PASS
     --gold-ink #2A1B00 on --gold-hi #F0C24C (hover) . 9.98:1  PASS
     --white on ghost hover fill over --ink-950 ...... ≥18:1   PASS
   Hover states change ELEVATION, not surface color, for accent and
   ghost (C's amber-hover 2.4:1 failure is the bug this prevents);
   the one hover recolor (--cta → --gold-hi) is checked above.
   NOTE: --accent is candidate-chosen. The curated bank guarantees
   white-on-accent AA; for a candidate-supplied accent the pipeline
   must re-verify white-on-accent ≥ 4.5:1 and, if it fails, set the
   button face to the derived --accent-text value instead. */

.btn {
  --bg: var(--accent);
  --fg: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 10/15/26px are G's hand-set optical values, adopted verbatim —
     each within the sanctioned ±1–2px of the 4px scale (--sp-2+2,
     --sp-4−1, --sp-5+2). Keeping them is what keeps the button
     feeling hand-set rather than gridded. */
  gap: 10px;
  padding: 15px 26px;
  border: 0;
  border-radius: var(--r-control);
  background: var(--bg);
  color: var(--fg);
  font: 650 0.9375rem/1 var(--ff-b);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .14);
}

/* Arrow slide target — inline SVG arrows inside the label */
.btn svg { flex: none; }

/* ── Variants ──────────────────────────────────────────────────── */
.btn--accent { --bg: var(--accent); --fg: var(--white); }

.btn--cta    { --bg: var(--gold);   --fg: var(--gold-ink); }

.btn--ghost {
  --bg: transparent;
  --fg: var(--white);
  box-shadow: inset 0 0 0 2px var(--on-dark-ring);
}
.btn--ghost:hover { --bg: var(--on-dark-ring-fill); }

/* 11/19px: G's optical values, within ±1–2px of --sp-3/--sp-4+3…
   19 is 3px past --sp-4 — kept verbatim from the adopted spec with
   this note, per the optical-deviation rule. */
.btn--sm   { padding: 11px 19px; font-size: 0.8438rem; }
.btn--full { width: 100%; }

/* ── Motion-safe enhancements ──────────────────────────────────────
   Sheen wipe, −3px lift, arrow slide. Everything in this block is
   decoration: with reduced motion the button is a plain solid pill
   with all states fully readable. The gold hover brightens to
   --gold-hi (9.98:1, checked above) so the recolor is safe too. */
@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .btn::after { /* sheen wipe */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg,
      transparent 20%, rgba(255, 255, 255, .32) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: transform .7s var(--ease);
  }
  .btn:hover { transform: translateY(-3px); box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .5); }
  .btn:hover::after { transform: translateX(120%); }
  .btn:active { transform: translateY(-1px); }
  .btn svg { transition: transform .35s var(--ease); }
  .btn:hover svg { transform: translateX(4px); }
  .btn--cta:hover { --bg: var(--gold-hi); }
}

/* ── Focus ring repair (must stay LAST in this file) ─────────────────
   .btn's own box-shadow declarations (rest 0 2px 0, ghost inset ring,
   motion-block hover lift) are equal specificity and would REPLACE
   base.css's two-layer :focus-visible ring, leaving only the gold
   outline (2.15:1 on paper-100 — a WCAG 1.4.11 failure). Re-append the
   ink layer on top of each variant's own stack; placed after the
   motion block so a hovered+focused button keeps its ring too. */
.btn:focus-visible,
.btn:hover:focus-visible {
  box-shadow: 0 0 0 6px var(--ink-950), 0 2px 0 rgba(0, 0, 0, .14);
}
.btn--ghost:focus-visible {
  box-shadow: 0 0 0 6px var(--ink-950), inset 0 0 0 2px var(--on-dark-ring);
}