/* ============================================================================================
   All AI button system (shared), v2 "Business Notebook". Link this file BEFORE the page stylesheet.
   Works on <a>, <button> and <input type="submit">. No inline styles, CSP-safe (style-src 'self').

   Classes
     .btn                 base (44px high, 8px radius, 700 weight, 16px). Always required.
     .btn--primary        solid brand blue #2563FF (main action: Get started, Pay, Continue)
     .btn--secondary      transparent, 1.5px ink outline; fills blue on hover (supporting action: WhatsApp, Back)
     .btn--ghost          quiet outline (tertiary: Log out, Cancel)
     .btn--inverse        white on blue/ink surfaces
     .btn--danger         destructive confirm (red outline, fills red on hover)
     .btn--sm 36px   .btn--lg 52px   .btn--block (full width)
     .btn .ico            optional 20px icon before/after the label
   States: :hover, :active, :focus-visible (3px blue ring), :disabled / [aria-disabled="true"] / .is-disabled.
   On dark surfaces (ink header pill, ink sidebar, ink footer) put the button inside an element with class .on-dark: outlines turn white, focus ring turns sky.
   Legacy aliases kept: .btn--violet = primary, .btn--silver = secondary.
   Contrast (AA): white on #2563FF = 5.0:1; ink #0B0F1E on paper #F2F0ED = 17:1.
   ============================================================================================ */
:root{
  --btn-radius:8px;
  --btn-h:44px; --btn-h-sm:36px; --btn-h-lg:52px;
  --btn-blue:#2563ff; --btn-blue-dark:#1d4ed8;
  --btn-ink:#0b0f1e; --btn-ring:#2563ff;
  --btn-danger:#b42318;
  /* kept for older stylesheets that read these */
  --btn-blue-top:#2563ff; --btn-blue-edge:#2563ff; --btn-surface:transparent; --btn-surface-hover:#2563ff; --btn-hairline:#0b0f1e; --btn-hairline-hover:#2563ff; --btn-text:#0b0f1e;
}
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-sizing:border-box;min-height:var(--btn-h);padding:0 22px;margin:0;
  font:700 1rem/1.2 var(--body,'DM Sans','Segoe UI',system-ui,sans-serif);letter-spacing:0;text-align:center;text-decoration:none;white-space:nowrap;
  color:var(--btn-ink);background:transparent;border:1.5px solid var(--btn-ink);border-radius:var(--btn-radius);
  cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease;
}
.btn .ico{width:20px;height:20px;fill:currentColor;flex:none}
.btn:focus-visible{outline:3px solid var(--btn-ring);outline-offset:3px}
.on-dark .btn:focus-visible{outline-color:#b4c8ff}
.btn:active{transform:translateY(0);box-shadow:none}

/* primary: the ONLY solid colour */
.btn--primary,.btn--violet{color:#fff;background:var(--btn-blue);border-color:var(--btn-blue)}
.btn--primary:active,.btn--violet:active{background:var(--btn-blue-dark);border-color:var(--btn-blue-dark)}

/* secondary: outline, fills blue on hover */
.btn--secondary,.btn--silver{color:var(--btn-ink);background:transparent;border-color:var(--btn-ink)}
.on-dark .btn--secondary,.on-dark .btn--silver{color:#fff;border-color:rgba(255,255,255,.55)}

/* ghost: quiet */
.btn--ghost{color:var(--btn-ink);background:transparent;border-color:rgba(11,15,30,.22)}
.on-dark .btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)}

/* inverse: for blue / ink surfaces */
.btn--inverse{color:#0f2a8a;background:#fff;border-color:#fff}

/* danger */
.btn--danger{color:var(--btn-danger);background:transparent;border-color:var(--btn-danger)}

/* sizes */
.btn--sm{min-height:var(--btn-h-sm);padding:0 16px;font-size:.9375rem;gap:6px}
.btn--sm .ico{width:18px;height:18px}
.btn--lg{min-height:var(--btn-h-lg);padding:0 30px;font-size:1.0625rem}
.btn--block{display:flex;width:100%}

/* hover (pointer devices only): colour fill + 1px lift */
@media (hover:hover){
  .btn:hover{transform:translateY(-1px)}
  .btn--primary:hover,.btn--violet:hover{background:var(--btn-blue-dark);border-color:var(--btn-blue-dark);color:#fff;box-shadow:0 12px 24px -14px rgba(37,99,255,.9)}
  .btn--secondary:hover,.btn--silver:hover,.btn--ghost:hover{background:var(--btn-blue);border-color:var(--btn-blue);color:#fff}
  .btn--inverse:hover{background:#d6e2ff;border-color:#d6e2ff;color:#0f2a8a}
  .btn--danger:hover{background:var(--btn-danger);color:#fff}
}
.btn:disabled,.btn[aria-disabled="true"],.btn.is-disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover,.btn:active{transform:none}}