/* papero-buttons.css (2026-10-17): every marketing button lit from above, one recipe.
   Spec: the tactile-buttons skill (gradient + four shadows: top light, bottom shade, contact, own-colour glow;
   pressed = the light goes out and the button sinks 1px). Linked by common/v3/frontend_style_buttons.pug from every
   style partial, so the homepage, /pricing, the content pages, /login, /reset-password and /signup all load it.

   How it is wired:
   - It styles the EXISTING selectors (no extra classes in the markup), listed per variant below. The geometry
     (padding, size, radius, font) stays where it was; this file owns only the look: background, border colour,
     label colour, box-shadow, filter, translate, transition, outline.
   - Every list starts with #pp-tk, an id nothing carries: inside :is() it lifts the whole list to id weight, so the
     recipe outranks the Foundation, bootstrap and signuppro chains (`.top-bar-section li:not(.has-form) a:not(.button)`,
     `button#signin`). The look declarations are !important because those bundles use !important on the same
     properties (`.signinButton button{background:...!important}`, `.button-3d{box-shadow:...!important}`).
   - Ink sections, the footer and the size steps only reset custom properties; the rules below read them.

   Colour (WCAG 2.x, measured on rendered pixels, see tests/home/tactile-buttons.test.js for the values pinned):
     brand CTA #6c5ce7 gives a white label only 4.86:1, so a gradient that is lighter at the top fails where the
     label sits. The gradient is centred on the brand colour instead: #7161e7 -> #513ee2 (computed: white label
     >= 4.97:1 from 20% to 80% of the height at rest, >= 4.66:1 at hover brightness 1.04). The glow and the focus
     ring use #6c5ce7. */
:root{
  --pp-btn-accent:#6c5ce7;
  --pp-btn-accent-top:#7161e7;
  --pp-btn-accent-bottom:#513ee2;
  --pp-btn-label:#fff;
  --pp-btn-radius:8px;
  --pp-btn-shadow-top-light:inset 0 1px 0 rgba(255,255,255,.35);
  --pp-btn-shadow-bottom-shade:inset 0 -2px 0 rgba(0,0,0,.2);
  --pp-btn-shadow-contact:0 1px 2px rgba(0,0,0,.4);
  --pp-btn-glow-color:rgba(108,92,231,.6);
  --pp-btn-glow-color-hover:rgba(108,92,231,.7);
  --pp-btn-glow-geo:0 8px 24px -6px;
  --pp-btn-glow-geo-hover:0 12px 30px -6px;
  --pp-btn-shadow-glow:var(--pp-btn-glow-geo) var(--pp-btn-glow-color);
  --pp-btn-shadow-pressed:inset 0 2px 4px rgba(0,0,0,.27);
  --pp-btn-ring:#6c5ce7;
  /* Secondary: a light key with ink text, same top light, softer shade, neutral glow. */
  --pp-btn-surface-top:#ffffff;
  --pp-btn-surface-bottom:#f3f2ee;
  --pp-btn-surface-border:#dedbd4;
  --pp-btn-surface-border-hover:#c4c0b7;
  --pp-btn-surface-text:#17151d;
  --pp-btn-surface-top-light:inset 0 1px 0 rgba(255,255,255,.9);
  --pp-btn-surface-bottom-shade:inset 0 -2px 0 rgba(23,21,29,.05);
  --pp-btn-surface-contact:0 1px 2px rgba(23,21,29,.16);
  --pp-btn-surface-glow:0 4px 12px -6px rgba(23,21,29,.18);
  --pp-btn-surface-glow-hover:0 6px 16px -6px rgba(23,21,29,.24);
  --pp-btn-surface-pressed:inset 0 2px 4px rgba(23,21,29,.16);
  /* Destructive: the same recipe on red (no marketing page has one yet; the specimen shows it). */
  --pp-btn-danger-top:#e5484d;
  --pp-btn-danger-bottom:#c9282d;
  --pp-btn-danger-glow:rgba(201,40,45,.55);
  /* Disabled: no glow, no top light, a muted fill with a 3:1 edge so the control still reads as one. */
  --pp-btn-disabled-bg:#eeedf2;
  --pp-btn-disabled-text:#5e5a6a;
  --pp-btn-disabled-edge:inset 0 0 0 1px #8f8a9d;
  /* Selected toggle (the /pricing yearly-monthly switch): the pressed look, never the violet action fill. */
  --pp-btn-selected-bg:#e8e6e0;
  --pp-btn-shadow-selected:inset 0 2px 4px rgba(23,21,29,.18),inset 0 0 0 1px rgba(23,21,29,.07);
}

/* ---- Sizes: glow blur scales with the button ---------------------------------------------------------------- */
:is(#pp-tk,.navigation-section .pp-nav-btn,.tab-bar .pp-nav-btn,.pp-footer .pp-footer__cta,body.pp-pricing a.contactus,.pp-consent button.pp-consent__btn,.pp-page .pp-share a){
  --pp-btn-glow-geo:0 4px 12px -4px;
  --pp-btn-glow-geo-hover:0 6px 16px -4px;
}
:is(#pp-tk,button#signin.cta,button#signup.cta,button.signinButtonSocial){
  --pp-btn-glow-geo:0 10px 28px -8px;
  --pp-btn-glow-geo-hover:0 14px 34px -8px;
}

/* ---- Dark surfaces (ink bands, the footer): retuned, never copied --------------------------------------------- */
:is(.pp-ink,.pp-footer) :is(#pp-tk,.pp-btn-primary,.pp-footer__cta){
  --pp-btn-shadow-top-light:inset 0 1px 0 rgba(255,255,255,.4);
  --pp-btn-shadow-contact:0 1px 2px rgba(0,0,0,.6);
  --pp-btn-glow-color:rgba(108,92,231,.4);
  --pp-btn-glow-color-hover:rgba(108,92,231,.5);
  --pp-btn-ring:#ffffff;
}
.pp-ink :is(#pp-tk,.pp-btn-primary){--pp-btn-glow-geo:0 6px 18px -6px;--pp-btn-glow-geo-hover:0 9px 24px -6px}
.pp-ink :is(#pp-tk,.pp-btn-primary,.pp-btn-secondary){--pp-btn-disabled-bg:#26232e;--pp-btn-disabled-text:#a9a5b3;--pp-btn-disabled-edge:inset 0 0 0 1px #6f6a7e}
.pp-ink :is(#pp-tk,.pp-btn-secondary){
  --pp-btn-surface-top:#2c2935;
  --pp-btn-surface-bottom:#221f2a;
  --pp-btn-surface-border:rgba(255,255,255,.14);
  --pp-btn-surface-border-hover:rgba(255,255,255,.32);
  --pp-btn-surface-text:#ffffff;
  --pp-btn-surface-top-light:inset 0 1px 0 rgba(255,255,255,.22);
  --pp-btn-surface-bottom-shade:inset 0 -2px 0 rgba(0,0,0,.35);
  --pp-btn-surface-contact:0 1px 2px rgba(0,0,0,.6);
  --pp-btn-surface-glow:0 0 0 transparent;
  --pp-btn-surface-glow-hover:0 6px 16px -8px rgba(0,0,0,.6);
  --pp-btn-surface-pressed:inset 0 2px 4px rgba(0,0,0,.5);
  --pp-btn-ring:#ffffff;
}
/* One glowing primary per section: once the Plus card has a live button, the Free card's stays lit but unglowing. */
body.pp-pricing #pricing:has(.price_wrapper.pro .perks a.button) :is(#pp-tk,.price_wrapper.free .perks a.button){
  --pp-btn-glow-color:transparent;
  --pp-btn-glow-color-hover:transparent;
}

/* ---- Primary ------------------------------------------------------------------------------------------------ */
:is(#pp-tk,.pp-btn-primary,.navigation-section .pp-nav-btn,.tab-bar .pp-nav-btn,.pp-footer .pp-footer__cta,body.pp-pricing a.main-button-free,body.pp-pricing .price_wrapper .perks a.button,button#signin.cta,button#signup.cta,#set-password-form button#submit,#get-credentials-form button#submit,.modal-alert button#ok,.modal-alert-failed button#failed,.modal-form-errors .modal-footer button){
  background-color:var(--pp-btn-accent-bottom)!important;
  background-image:linear-gradient(var(--pp-btn-accent-top),var(--pp-btn-accent-bottom))!important;
  background-origin:border-box!important;
  border-color:transparent!important;
  color:var(--pp-btn-label)!important;
  text-shadow:none!important;
  box-shadow:var(--pp-btn-shadow-top-light),var(--pp-btn-shadow-bottom-shade),var(--pp-btn-shadow-contact),var(--pp-btn-shadow-glow)!important;
  --pp-btn-shadow-glow:var(--pp-btn-glow-geo) var(--pp-btn-glow-color);
  transform:none!important;
  filter:none;
  opacity:1!important;
  cursor:pointer;
  transition:box-shadow .18s ease-out,filter .18s ease-out,translate .18s ease-out,background-color .18s ease-out!important;
}
:is(#pp-tk,.pp-btn-primary,body.pp-pricing a.main-button-free,body.pp-pricing .price_wrapper .perks a.button) span{color:var(--pp-btn-label)!important}

/* ---- Secondary (and the icon-only share buttons) ------------------------------------------------------------ */
:is(#pp-tk,.pp-btn-secondary,body.pp-pricing a.contactus,.pp-consent button.pp-consent__btn,button.signinButtonSocial,#get-credentials .modal-footer button#cancel,#failed-login .modal-footer button#cancel,.pp-page .pp-share a){
  background-color:var(--pp-btn-surface-bottom)!important;
  background-image:linear-gradient(var(--pp-btn-surface-top),var(--pp-btn-surface-bottom))!important;
  background-origin:border-box!important;
  border-color:var(--pp-btn-surface-border)!important;
  color:var(--pp-btn-surface-text)!important;
  text-shadow:none!important;
  box-shadow:var(--pp-btn-surface-top-light),var(--pp-btn-surface-bottom-shade),var(--pp-btn-surface-contact),var(--pp-btn-surface-glow)!important;
  transform:none!important;
  filter:none;
  opacity:1!important;
  cursor:pointer;
  transition:box-shadow .18s ease-out,filter .18s ease-out,translate .18s ease-out,border-color .18s ease-out!important;
}
:is(#pp-tk,.pp-btn-secondary,body.pp-pricing a.contactus) span{color:var(--pp-btn-surface-text)!important}

/* ---- Destructive (same recipe on red) and ghost (no surface until hover) --------------------------------------- */
:is(#pp-tk,.pp-btn-danger){
  background-color:var(--pp-btn-danger-bottom)!important;
  background-image:linear-gradient(var(--pp-btn-danger-top),var(--pp-btn-danger-bottom))!important;
  background-origin:border-box!important;
  border-color:transparent!important;
  color:#fff!important;
  box-shadow:var(--pp-btn-shadow-top-light),var(--pp-btn-shadow-bottom-shade),var(--pp-btn-shadow-contact),var(--pp-btn-glow-geo) var(--pp-btn-danger-glow)!important;
  cursor:pointer;
  transition:box-shadow .18s ease-out,filter .18s ease-out,translate .18s ease-out!important;
}
:is(#pp-tk,.pp-btn-ghost,body.pp-pricing .switchContainer .switchButton.switchButtonNotSelected){
  background:transparent!important;
  box-shadow:none!important;
  transition:box-shadow .18s ease-out,background-color .18s ease-out,translate .18s ease-out!important;
}

/* ---- Selected toggle: the pressed look ---------------------------------------------------------------------- */
:is(#pp-tk,body.pp-pricing .switchContainer .switchButton.switchButtonSelected){
  background:var(--pp-btn-selected-bg)!important;
  color:var(--pp-btn-surface-text)!important;
  box-shadow:var(--pp-btn-shadow-selected)!important;
}

/* ---- Hover (pointer devices only: phones get no sticky hover) ---------------------------------------------- */
@media (hover:hover){
  :is(#pp-tk,.pp-btn-primary,.navigation-section .pp-nav-btn,.tab-bar .pp-nav-btn,.pp-footer .pp-footer__cta,body.pp-pricing a.main-button-free,body.pp-pricing .price_wrapper .perks a.button,button#signin.cta,button#signup.cta,#set-password-form button#submit,#get-credentials-form button#submit,.modal-alert button#ok,.modal-alert-failed button#failed,.modal-form-errors .modal-footer button,.pp-btn-danger):hover{
    filter:brightness(1.04);
    --pp-btn-shadow-glow:var(--pp-btn-glow-geo-hover) var(--pp-btn-glow-color-hover);
  }
  :is(#pp-tk,.pp-btn-secondary,body.pp-pricing a.contactus,.pp-consent button.pp-consent__btn,button.signinButtonSocial,#get-credentials .modal-footer button#cancel,#failed-login .modal-footer button#cancel,.pp-page .pp-share a):hover{
    filter:brightness(1.03);
    border-color:var(--pp-btn-surface-border-hover)!important;
    box-shadow:var(--pp-btn-surface-top-light),var(--pp-btn-surface-bottom-shade),var(--pp-btn-surface-contact),var(--pp-btn-surface-glow-hover)!important;
  }
  :is(#pp-tk,.pp-btn-ghost):hover,body.pp-pricing .switchContainer .switchSelector:hover :is(#pp-tk,.switchButton.switchButtonNotSelected){
    background:rgba(255,255,255,.7)!important;
    box-shadow:0 1px 2px rgba(23,21,29,.14)!important;
  }
}

/* ---- Pressed: the light goes out and the key sinks 1px (press 70ms in, release 180ms out) --------------------- */
:is(#pp-tk,.pp-btn-primary,.navigation-section .pp-nav-btn,.tab-bar .pp-nav-btn,.pp-footer .pp-footer__cta,body.pp-pricing a.main-button-free,body.pp-pricing .price_wrapper .perks a.button,button#signin.cta,button#signup.cta,#set-password-form button#submit,#get-credentials-form button#submit,.modal-alert button#ok,.modal-alert-failed button#failed,.modal-form-errors .modal-footer button,.pp-btn-danger):active{
  translate:0 1px;
  filter:none;
  box-shadow:var(--pp-btn-shadow-pressed)!important;
  transition-duration:.07s!important;
}
:is(#pp-tk,.pp-btn-secondary,body.pp-pricing a.contactus,.pp-consent button.pp-consent__btn,button.signinButtonSocial,#get-credentials .modal-footer button#cancel,#failed-login .modal-footer button#cancel,.pp-page .pp-share a):active{
  translate:0 1px;
  filter:none;
  background-image:linear-gradient(var(--pp-btn-surface-bottom),var(--pp-btn-surface-bottom))!important;
  box-shadow:var(--pp-btn-surface-pressed)!important;
  transition-duration:.07s!important;
}
:is(#pp-tk,.pp-btn-ghost):active,body.pp-pricing .switchContainer .switchSelector:active :is(#pp-tk,.switchButton){
  translate:0 1px;
  background:var(--pp-btn-selected-bg)!important;
  box-shadow:var(--pp-btn-shadow-selected)!important;
  transition-duration:.07s!important;
}

/* ---- Focus: keyboard only, a ring on top of the shadow stack (outline never replaces box-shadow) ------------- */
:is(#pp-tk,.pp-btn-primary,.navigation-section .pp-nav-btn,.tab-bar .pp-nav-btn,.pp-footer .pp-footer__cta,body.pp-pricing a.main-button-free,body.pp-pricing .price_wrapper .perks a.button,button#signin.cta,button#signup.cta,#set-password-form button#submit,#get-credentials-form button#submit,.modal-alert button#ok,.modal-alert-failed button#failed,.modal-form-errors .modal-footer button,.pp-btn-danger,.pp-btn-secondary,body.pp-pricing a.contactus,.pp-consent button.pp-consent__btn,button.signinButtonSocial,#get-credentials .modal-footer button#cancel,#failed-login .modal-footer button#cancel,.pp-page .pp-share a,.pp-btn-ghost,body.pp-pricing .switchContainer .switchSelector):focus-visible{
  outline:2px solid var(--pp-btn-ring)!important;
  outline-offset:2px!important;
}
:is(#pp-tk,.pp-btn-primary,.pp-btn-secondary,button#signin.cta,button#signup.cta,button.signinButtonSocial,.pp-consent button.pp-consent__btn,#set-password-form button#submit,#get-credentials-form button#submit):focus:not(:focus-visible){outline:none!important}

/* ---- Loading: the lit look stays (no flash to flat), the width stays, clicks are blocked ---------------------- */
/* login.js and signupFree.js set aria-busy (and readonly, which older cached copies still set) with the spinner. */
:is(#pp-tk,.pp-btn-primary,.pp-btn-secondary,.pp-btn-danger,button#signin.cta,button#signup.cta,#set-password-form button#submit,#get-credentials-form button#submit):is([aria-busy=true],[readonly]){
  cursor:progress!important;
  pointer-events:none;
  opacity:1!important;
}

/* ---- Disabled (after hover and pressed, so it wins at equal weight): no glow, no top light, no motion -------- */
:is(#pp-tk,.pp-btn-primary,.pp-btn-secondary,.pp-btn-danger,.pp-btn-ghost,body.pp-pricing .price_wrapper .plus-soon,button#signin.cta,button#signup.cta,#set-password-form button#submit,#get-credentials-form button#submit,button.signinButtonSocial,.pp-consent button.pp-consent__btn,.pp-page .pp-share a):is(:disabled,[aria-disabled=true]):not([aria-busy=true]):not([readonly]){
  background:var(--pp-btn-disabled-bg)!important;
  border-color:transparent!important;
  color:var(--pp-btn-disabled-text)!important;
  box-shadow:var(--pp-btn-disabled-edge)!important;
  filter:none!important;
  translate:none!important;
  opacity:1!important;
  cursor:not-allowed!important;
}

/* ---- Touch: a 44px hit area around the small buttons, without moving anything ---------------------------------- */
@media (pointer:coarse){
  :is(#pp-tk,.navigation-section .pp-nav-btn,.tab-bar .pp-nav-btn,.pp-footer .pp-footer__cta,body.pp-pricing a.contactus,.pp-consent button.pp-consent__btn,.pp-page .pp-share a){position:relative}
  :is(#pp-tk,.navigation-section .pp-nav-btn,.tab-bar .pp-nav-btn,.pp-footer .pp-footer__cta,body.pp-pricing a.contactus,.pp-consent button.pp-consent__btn,.pp-page .pp-share a)::after{
    content:'';position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);translate:-50% -50%;
  }
}

/* ---- Reduced motion: keep the colour and shadow change, drop the movement ---------------------------------------- */
@media (prefers-reduced-motion:reduce){
  :is(#pp-tk,.pp-btn-primary,.pp-btn-secondary,.pp-btn-danger,.pp-btn-ghost,.navigation-section .pp-nav-btn,.tab-bar .pp-nav-btn,.pp-footer .pp-footer__cta,body.pp-pricing a.main-button-free,body.pp-pricing .price_wrapper .perks a.button,body.pp-pricing a.contactus,.pp-consent button.pp-consent__btn,button#signin.cta,button#signup.cta,button.signinButtonSocial,#set-password-form button#submit,#get-credentials-form button#submit,.pp-page .pp-share a,body.pp-pricing .switchContainer .switchButton):active{translate:none}
}