/* =====================================================================
   CTAs — the filled pill and the text link
   ===================================================================== */

/* THE FILLED PILL IS NEITHER FOREGROUND NOR BACKGROUND. Its fill must
   stand off the page (3:1) AND carry its own label (4.5:1). That is why
   --pill is its own token and not folded into --accent: one of those two
   jobs would otherwise be decided for it by a token serving a different
   purpose.

   CLOSED 2026-08-07 BY CHANGING THE BACKGROUND, NOT THE FOREGROUND.
   The label measured 4.1669 on --pill against a 4.5 threshold. Every
   foreground alternative was tested first and every one was worse
   (--on-fill 3.8925, --ink 3.5594), so the fix had to come from the
   background side. --pill-hover already existed at #585EDC and measures
   5.1858 with the same white label.

   IT TOOK TWO PASSES, AND THE FIRST ONE IS THE INSTRUCTIVE HALF. Swapping
   the two values — resting takes --pill-hover, hover takes --pill — fixed
   the resting state and MOVED the 4.1669 failure onto hover. SC 1.4.3
   applies to text in every state, so that relocated the failure rather
   than removing it, and a resting-state contrast sweep could not see it:
   the sweep never hovers. Both states then took --pill-hover, which is why
   --pill reached zero consumers.

   C4 (2026-08-17) CLOSES THAT RELOCATION. Resting takes --pill again and
   hover keeps --pill-hover, but BOTH TOKENS NOW HOLD #2B61C9, so there is
   no longer a worse value for the failure to be moved to. The 4.1669 label
   figure belonged to #696FE8 and describes a value neither token carries.
   **Measured at the new value: white on #2B61C9 is 5.7440 against 4.5.**
   Hover remains a COLOUR NO-OP — same value both sides — and that is now
   true because the two tokens agree, not because one token serves both.

   THE DECLARATIONS NAME THEIR ROLES AGAIN, WHICH THEY DID NOT BETWEEN
   2026-08-07 AND C4. Read them as authoritative for which state they
   govern; do NOT read --pill-hover's NAME as authoritative for its uses,
   because it still paints three non-pill things elsewhere. See tokens.css
   TOK-2.

   --pill being a separate token from --accent is what made this possible
   without disturbing .cta-line, the focus ring or the badge dots. C4
   preserves that separation deliberately: the two tokens land on one value
   today and REMAIN SEPARATELY GOVERNED, so a future change to either state
   does not decide the other.

   THE LABEL TAKES --on-pill, A TOKEN. In the source concept it was the
   literal `color:#fff`, so a change to the fill did NOT move it and the
   ratio had to be re-measured by hand every time. It still has to be
   re-measured, but now both sides of it are addressable. */
.btn{
  display:inline-block;
  padding:14px 30px;
  font-size:14.5px;font-weight:640;
  border-radius:8px;
  background:var(--pill);
  color:var(--on-pill);
  transition:transform .25s,background .25s;
}
/* THE HOVER FILL IS THE SAME VALUE AS THE RESTING FILL, DELIBERATELY.
   Hover changes the lift, not the colour: translateY(-2px) is now the
   whole affordance.

   THE DECLARATION IS KEPT EVEN THOUGH IT SETS THE SAME VALUE. "Hover does
   not change the fill" stated explicitly is readable; an absent
   declaration looks like an oversight and invites the next reader to put
   a colour back — which is exactly how the 4.1669 failure would return.
   The transition is kept too: it still serves transform. */
.btn:hover{transform:translateY(-2px);background:var(--pill-hover)}
.btn.ghost{background:transparent;color:var(--on-page);border:1.5px solid var(--on-page)}

/* THE TEXT CTA — SIZE IS LOAD-BEARING HERE, NOT TYPOGRAPHIC PREFERENCE.

   This element appears on BOTH a light ground and the dark problem band.
   As --accent it measures 3.5594 on --plum and 3.6759 / 3.931 on cream
   and paper. Those pull in OPPOSITE DIRECTIONS against a 4.5 small-text
   threshold: darkening the accent to clear 4.5 on light drives the dark
   case further down, and lightening it does the reverse. The search space
   for a single value is empty.

   AT 19px / 700 THE ELEMENT CROSSES THE LARGE-TEXT BOUNDARY (18.66px at
   bold), so the threshold becomes 3.0 and all four measured ratios clear
   it AS THEY STAND, with no palette dependency at all. That is why this
   is a type decision and not a colour one, and it is what allows 4 of the
   16 inherited AA failures to close before palette canon exists.

   DO NOT REDUCE THIS BELOW 18.66px. Doing so silently re-opens four AA
   failures and nothing in a colour check will report it.

   DEFERRED, NOT REJECTED: splitting --accent into --accent-on-light and
   --accent-on-dark is the more correct long-term answer, because it fixes
   the ratio rather than moving the threshold, and it would let the CTA be
   set at any size. It is post-launch because it needs a client palette
   conversation and this does not. */
.cta-line{
  display:inline-block;
  margin-top:22px;
  font-size:19px;
  font-weight:700;
  color:var(--accent);
}

/* REDUCED MOTION. This file had no such block, so .btn's transition was
   the one surviving motion declaration with no suppression at all —
   measured `transform, background` / 0.25s under reduce at both 1280 and
   900. `.btn` here is (0,1,0), the same weight as the rule it overrides,
   and wins on source order because it sits after it.

   THE HOVER TRANSFORM IS LEFT INTACT DELIBERATELY. `.btn:hover` still
   lifts 2px — that is an instantaneous state change once the transition
   is gone, not an animation. Removing it would be a design change wearing
   an accessibility label. What reduced motion removes is the tween, not
   the destination. */
@media(prefers-reduced-motion:reduce){
  .btn{transition:none}
}