/* MAGMA — the button.

   One rule decides everything: the ROLE says how loud the action is, the SURFACE
   says which palette it wears. Nothing in a page template picks a colour.

     role=primary    the one action a screen is asking for
     role=secondary  the alternative beside it
     role=quiet      a service action that must not compete

   Put data-surface="dark" on any ink panel and every button inside it flips —
   that is the whole of the "on dark" logic. Flame is the interaction colour
   throughout (see tokens/interactions.css for the rest of the system). */

.magma-btn{
  display:inline-flex;flex-direction:row;align-items:center;justify-content:center;
  gap:10px;box-sizing:border-box;border:0;cursor:pointer;text-decoration:none;text-align:center;
  white-space:nowrap;letter-spacing:var(--ls-cta);text-transform:uppercase;
  border-radius:var(--radius-md);
  transition:background 180ms var(--ease-standard),color 180ms var(--ease-standard),
             box-shadow 180ms var(--ease-standard),transform 110ms var(--ease-standard);
  -webkit-tap-highlight-color:transparent;
}
.magma-btn > span{display:inline-block}
.magma-btn[data-block]{display:flex;width:100%}

/* ── size: fixed to the place it is used, never a free choice ─────── */
.magma-btn[data-size="page"]{min-height:clamp(56px,6.1vw,78px);padding:12px 24px;font:var(--type-cta)}
.magma-btn[data-size="section"]{min-height:56px;padding:12px 24px;font:var(--type-cta)}
.magma-btn[data-size="utility"]{min-height:40px;padding:12px 24px;font:var(--type-cta-sm)}

/* ── skin on light surfaces ───────────────────────────────────────── */
.magma-btn[data-role="primary"]{background:var(--magma-ink);color:var(--magma-white)}
.magma-btn[data-role="secondary"]{background:transparent;color:var(--magma-ink);box-shadow:inset 0 0 0 1px var(--magma-ink)}
.magma-btn[data-role="quiet"]{background:var(--magma-bone-300);color:var(--magma-ink)}

.magma-btn[data-role="primary"]:hover{background:var(--magma-flame-3);color:var(--magma-white)}
.magma-btn[data-role="primary"]:active{background:var(--magma-flame-2)}
.magma-btn[data-role="secondary"]:hover{background:rgba(249,92,4,.08);color:var(--magma-flame-2);box-shadow:inset 0 0 0 1px var(--magma-flame-3)}
.magma-btn[data-role="secondary"]:active{background:rgba(249,92,4,.18)}
.magma-btn[data-role="quiet"]:hover{background:rgba(249,92,4,.10);color:var(--magma-flame-2)}
.magma-btn[data-role="quiet"]:active{background:rgba(249,92,4,.20)}

/* ── skin on ink surfaces — the same three roles, inverted ────────── */
/* `data-surface="dark"` is the contract; the named ink panels are listed too so a
   missed attribute can never leave a light button standing on ink. */
:is([data-surface="dark"],[data-r~="umbrella"],[data-r~="panel"],[data-magma="cookie-consent"]) .magma-btn[data-role="primary"]{background:var(--magma-white);color:var(--magma-ink)}
:is([data-surface="dark"],[data-r~="umbrella"],[data-r~="panel"],[data-magma="cookie-consent"]) .magma-btn[data-role="primary"]:hover{background:var(--magma-flame-3);color:var(--magma-white)}
:is([data-surface="dark"],[data-r~="umbrella"],[data-r~="panel"],[data-magma="cookie-consent"]) .magma-btn[data-role="primary"]:active{background:var(--magma-flame-2)}
:is([data-surface="dark"],[data-r~="umbrella"],[data-r~="panel"],[data-magma="cookie-consent"]) .magma-btn[data-role="secondary"]{background:transparent;color:var(--magma-white);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2)}
:is([data-surface="dark"],[data-r~="umbrella"],[data-r~="panel"],[data-magma="cookie-consent"]) .magma-btn[data-role="secondary"]:hover{background:rgba(249,92,4,.16);color:var(--magma-white);box-shadow:inset 0 0 0 1px var(--magma-flame-3)}
:is([data-surface="dark"],[data-r~="umbrella"],[data-r~="panel"],[data-magma="cookie-consent"]) .magma-btn[data-role="secondary"]:active{background:rgba(249,92,4,.28)}
:is([data-surface="dark"],[data-r~="umbrella"],[data-r~="panel"],[data-magma="cookie-consent"]) .magma-btn[data-role="quiet"]{background:rgba(255,255,255,0.08);color:var(--magma-white)}
:is([data-surface="dark"],[data-r~="umbrella"],[data-r~="panel"],[data-magma="cookie-consent"]) .magma-btn[data-role="quiet"]:hover{background:rgba(249,92,4,.24)}

/* ── shared states ────────────────────────────────────────────────── */
.magma-btn:active{transform:translateY(1px) scale(.99)}
.magma-btn:focus-visible{outline:2px solid var(--magma-flame-3);outline-offset:3px}
.magma-btn[aria-disabled="true"]{pointer-events:none;opacity:.4}

@media (prefers-reduced-motion:reduce){
  .magma-btn{transition:none}
  .magma-btn:active{transform:none}
}