/* ============================================================================
   vth-ds-button.css — the design system's Button (DesignSystem_0bf84f.Button).

   Transcribed from the design system bundle, components/core/Button.jsx
   (copy kept at lms/.claude/skills/unified-marketing-offers/references/design/ds-Button.jsx).
   It is a separate component from `.vth-btn` on purpose: its geometry is the
   Figma kit's (36 / 42 / 48px, radius 6 / 8, Poppins 500 14px, 16px at xl), which
   `.vth-btn`'s 44 / 52px sizes do not match — and designs made in Claude Design use
   this one.

     <button class="vth-dsbtn vth-dsbtn--xl vth-dsbtn--primary vth-dsbtn--full">Claim</button>

   Sizes:  --s 32 · (base) 36 · --l 42 · --xl 48.
           A size the component does not define falls back to base — which is what
           the design's `size="m"` renders as, so there is deliberately no --m.
   Types:  --primary (default look) · --secondary-blue · --secondary-grey · --white
           · --ghost · --destructive
   State:  hover = the type's hover fill, :active = its pressed fill; nothing scales.
           Disabled: primary -> #DAE9FF fill, others -> #E7E7E7; text #6D6D6D.

   Colour: primary reads --vth-blue / -hover / -focus, so a sector page that
   re-points those on its `.vth` root gets a sector-coloured button with no rules
   of its own.
   ============================================================================ */

.vth .vth-dsbtn{
  --dsbtn-bg:var(--vth-blue);
  --dsbtn-bg-hover:var(--vth-blue-hover);
  --dsbtn-bg-active:var(--vth-blue-focus);
  --dsbtn-fg:var(--text-on-blue);
  --dsbtn-bd:transparent;

  display:inline-flex; flex-direction:row; align-items:center; justify-content:center; gap:8px;
  box-sizing:border-box; min-height:36px; padding:8px 16px; border-radius:6px;
  border:1px solid var(--dsbtn-bd); background:var(--dsbtn-bg); color:var(--dsbtn-fg);
  font-family:var(--font-sans); font-weight:var(--weight-medium); font-size:14px; line-height:20px;
  white-space:nowrap; text-decoration:none; cursor:pointer;
  transition:background .15s ease, box-shadow .15s ease;
}
.vth .vth-dsbtn:hover{ background:var(--dsbtn-bg-hover); color:var(--dsbtn-fg); text-decoration:none; }
.vth .vth-dsbtn:active{ background:var(--dsbtn-bg-active); }
.vth .vth-dsbtn:focus-visible{ outline:none; box-shadow:var(--shadow-focus-blue); }
.vth .vth-dsbtn i{ font-size:1.15em; line-height:1; }

.vth .vth-dsbtn--s{ min-height:32px; padding:6px 14px; font-size:14px; line-height:18px; border-radius:6px; }
.vth .vth-dsbtn--l{ min-height:42px; padding:9px 17px; font-size:14px; line-height:20px; border-radius:6px; }
.vth .vth-dsbtn--xl{ min-height:48px; padding:12px 22px; font-size:16px; line-height:22px; border-radius:8px; }
.vth .vth-dsbtn--full{ width:100%; }

.vth .vth-dsbtn--secondary-blue{
  --dsbtn-bg:var(--surface-blue-soft); --dsbtn-bg-hover:var(--tc-buttons-secondary-blue-default); --dsbtn-bg-active:#C9DEFF;
  --dsbtn-fg:var(--vth-blue);
}
.vth .vth-dsbtn--secondary-grey{
  --dsbtn-bg:var(--surface-muted); --dsbtn-bg-hover:var(--surface-subtle); --dsbtn-bg-active:var(--border-light);
  --dsbtn-fg:var(--text-primary);
}
.vth .vth-dsbtn--white{
  --dsbtn-bg:#FFFFFF; --dsbtn-bg-hover:var(--surface-subtle); --dsbtn-bg-active:var(--surface-muted);
  --dsbtn-fg:var(--text-primary); --dsbtn-bd:var(--border-light);
}
.vth .vth-dsbtn--ghost{
  --dsbtn-bg:transparent; --dsbtn-bg-hover:var(--surface-muted); --dsbtn-bg-active:var(--border-light);
  --dsbtn-fg:var(--text-primary);
}
.vth .vth-dsbtn--destructive{
  --dsbtn-bg:var(--color-error); --dsbtn-bg-hover:var(--color-error-hover); --dsbtn-bg-active:#B71E1E;
  --dsbtn-fg:#FFFFFF;
}

.vth .vth-dsbtn:disabled,
.vth .vth-dsbtn.is-disabled{
  background:var(--tc-buttons-disabled-primary); color:var(--text-muted); cursor:not-allowed; pointer-events:none;
}
/* Every type other than primary disables to the neutral grey, as Button.jsx does. */
.vth .vth-dsbtn--secondary-blue:disabled, .vth .vth-dsbtn--secondary-blue.is-disabled,
.vth .vth-dsbtn--secondary-grey:disabled, .vth .vth-dsbtn--secondary-grey.is-disabled,
.vth .vth-dsbtn--white:disabled, .vth .vth-dsbtn--white.is-disabled,
.vth .vth-dsbtn--ghost:disabled, .vth .vth-dsbtn--ghost.is-disabled,
.vth .vth-dsbtn--destructive:disabled, .vth .vth-dsbtn--destructive.is-disabled{
  background:var(--tc-buttons-disabled);
}