/* ============================================================================
   Stoculmeu button system — "pbtn" (Puppertino-style, Apple-ish)
   ----------------------------------------------------------------------------
   One base class + a variant. Works standalone (<button class="pbtn pbtn-primary">)
   and layered on Bootstrap (<button class="btn pbtn pbtn-primary">).
   Colours come from design-system.css tokens, so light + dark both work and
   the accent follows Settings -> Appearance.

   VOCABULARY (say these names to ask for a button):

     pbtn                base — always add it
     pbtn-primary        filled BLUE (#007AFF) — the one main action per view
     pbtn-accent         filled with the THEME accent (follows Appearance)
     pbtn-success        filled GREEN   — confirm / deposit / positive
     pbtn-warning        filled ORANGE  — withdraw / caution
     pbtn-danger         filled RED     — delete / destructive
     pbtn-neutral        WHITE + hairline border — secondary / "Cancel"
     pbtn-ghost          transparent, coloured text only — tertiary / inline
     pbtn-ghost-danger   transparent red text — tertiary destructive

     pbtn-tint           neutral at rest, colour tint fills on HOVER  (+ a colour:)
       pbtn-tint-blue / -green / -orange / -red / -accent

   MODIFIERS:
     pbtn-sm  pbtn-lg           size
     pbtn-pill                  fully rounded
     pbtn-block                 full width
     pbtn-icon                  square, icon-only (pair with a size)
   ============================================================================ */

.pbtn {
  --_bg:  var(--p-btn-bg, #fff);
  --_bd:  var(--p-btn-border, #cacaca);
  --_fg:  var(--p-btn-col, #000);
  --_sh:  var(--p-btn-shadow, 0 1px .375px rgba(0,0,0,.05), 0 .25px .375px rgba(0,0,0,.15));

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .48rem 1.2rem;
  min-height: 40px;
  border: 1px solid var(--_bd);
  border-radius: 10px;
  background: var(--_bg);
  color: var(--_fg);
  box-shadow: var(--_sh);
  font: inherit;
  font-weight: 400;
  letter-spacing: -.006em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  transition: transform .08s var(--ds-ease, cubic-bezier(.32,.72,0,1)),
              filter .15s, background .15s, border-color .15s, box-shadow .15s;
}
.pbtn:hover { filter: brightness(.97); text-decoration: none; }
.pbtn:active { transform: scale(.97); }
.pbtn:focus-visible { outline: var(--focus-ring-w) solid var(--focus-ring); outline-offset: 1px; }
.pbtn[disabled], .pbtn:disabled, .pbtn.is-disabled {
  background: var(--ds-fill, #f2f2f7) !important;
  color: var(--ds-text-3, #9a9a9e) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  cursor: not-allowed;
  pointer-events: none;
}
.pbtn > .lyc, .pbtn > svg { flex: 0 0 auto; }

/* ---- filled variants: solid colour, white text, iOS highlight + sheen ---- */
.pbtn-primary, .pbtn-accent, .pbtn-success, .pbtn-warning, .pbtn-danger {
  border: 0;
  color: #fff;
  box-shadow: var(--p-prim-shadow, inset 0 1px 1px rgba(255,255,255,.41), 0 2px 3px -2px rgba(0,0,0,.3));
}
.pbtn-primary, .pbtn-accent, .pbtn-success, .pbtn-warning, .pbtn-danger { }
.pbtn-primary::before, .pbtn-accent::before, .pbtn-success::before,
.pbtn-warning::before, .pbtn-danger::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0) 100%);
  opacity: .17;
}
.pbtn-primary { background: var(--p-prim-bg, #0088ff); }
.pbtn-primary:active { background: var(--p-prim-bg-ac, #007deb); }
.pbtn-accent  { background: var(--ds-accent, #6366f1); }
.pbtn-success { background: var(--ds-green, #34c759); }
.pbtn-warning { background: var(--ds-orange, #ff9500); }
.pbtn-danger  { background: var(--ds-red, #ff3b30); }
.pbtn-accent:active, .pbtn-success:active, .pbtn-warning:active, .pbtn-danger:active { filter: brightness(.93); }

/* ---- neutral: the plain Puppertino button (secondary / Cancel) ---- */
.pbtn-neutral {
  background: var(--p-btn-bg, #fff);
  border: 1px solid var(--p-btn-border, #cacaca);
  color: var(--p-btn-col, #000);
}

/* ---- ghost: transparent, coloured text only ---- */
.pbtn-ghost, .pbtn-ghost-danger {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding-inline: .7rem;
}
.pbtn-ghost { color: var(--ds-blue, #0088ff); }
.pbtn-ghost:hover { background: color-mix(in srgb, var(--ds-blue, #0088ff) 12%, transparent); filter: none; }
.pbtn-ghost-danger { color: var(--ds-red, #ff3b30); }
.pbtn-ghost-danger:hover { background: var(--ds-err-bg, rgba(255,59,48,.12)); filter: none; }

/* ---- tint: neutral at rest, colour fills on hover (card action style) ---- */
.pbtn-tint {
  --_c: var(--ds-blue, #0088ff);
  background: var(--p-btn-bg, #fff);
  border: 1px solid var(--p-btn-border, #cacaca);
  color: var(--_c);
  box-shadow: none;
}
.pbtn-tint:hover {
  filter: none;
  background: color-mix(in srgb, var(--_c) 13%, transparent);
  border-color: transparent;
}
.pbtn-tint > .lyc, .pbtn-tint > svg { color: var(--_c); }
.pbtn-tint-blue   { --_c: var(--ds-blue, #0088ff); }
.pbtn-tint-green  { --_c: var(--ds-green, #34c759); }
.pbtn-tint-orange { --_c: var(--ds-orange, #ff9500); }
.pbtn-tint-red    { --_c: var(--ds-red, #ff3b30); }
.pbtn-tint-accent { --_c: var(--ds-accent, #6366f1); }

/* ---- sizes / shape ---- */
.pbtn-sm { min-height: 34px; padding: .34rem 1rem; font-size: .9rem; border-radius: 9px; }
.pbtn-lg { min-height: 48px; padding: .7rem 1.7rem; font-size: 1.08rem; border-radius: 12px; }
.pbtn-pill { border-radius: 999px; }
.pbtn-block { display: flex; width: 100%; }
.pbtn-icon { padding: 0; width: 40px; aspect-ratio: 1; }
.pbtn-icon.pbtn-sm { width: 34px; }
.pbtn-icon.pbtn-lg { width: 48px; }

@media (prefers-reduced-motion: reduce) {
  .pbtn { transition-duration: .01ms; }
}