/* ===========================================================================
   Klozera Design System — Button
   ---------------------------------------------------------------------------
   Extracted verbatim from components/buttons/Button.jsx in the Klozera bundle
   (_ds_bundle.js), which injects this CSS at runtime under #klz-button-css.
   The portfolio is a plain static page with no React, so the markup the
   component would have produced is written directly in index.html:

     <a class="klz-btn klz-btn--primary klz-btn--lg">
       <span class="klz-btn--ico"><svg…></span>   <- leftIcon
       <span>Label</span>                          <- children
       <span class="klz-btn--ico"><svg…></span>   <- rightIcon
     </a>

   Variants: primary | secondary | ghost | danger.  Sizes: sm | md | lg.
   =========================================================================== */
.klz-btn {
  --_h: var(--control-h-md);
  --_px: var(--space-4);
  --_fs: var(--text-md);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  height: var(--_h); padding: 0 var(--_px);
  font-family: var(--font-sans); font-size: var(--_fs);
  font-weight: var(--fw-semibold); letter-spacing: var(--tracking-snug);
  line-height: 1; white-space: nowrap; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer; user-select: none;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.klz-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.klz-btn:active:not(:disabled) { transform: translateY(0.5px) scale(0.99); }
.klz-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.klz-btn--sm { --_h: var(--control-h-sm); --_px: var(--space-3); --_fs: var(--text-sm); border-radius: var(--radius-sm); }
.klz-btn--lg { --_h: var(--control-h-lg); --_px: var(--space-6); --_fs: var(--text-base); }
.klz-btn--full { width: 100%; }

.klz-btn--primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-xs); }
.klz-btn--primary:hover:not(:disabled) { background: var(--brand-hover); box-shadow: var(--shadow-brand); }
.klz-btn--primary:active:not(:disabled) { background: var(--brand-active); }

.klz-btn--secondary { background: var(--surface-card); color: var(--text-primary); border-color: var(--border-default); box-shadow: var(--shadow-xs); }
.klz-btn--secondary:hover:not(:disabled) { background: var(--bg-subtle); border-color: var(--border-strong); }

.klz-btn--ghost { background: transparent; color: var(--text-secondary); }
.klz-btn--ghost:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text-primary); }

.klz-btn--danger { background: var(--danger); color: #fff; }
.klz-btn--danger:hover:not(:disabled) { background: var(--red-700); }

.klz-btn--ico { width: 1.1em; height: 1.1em; display: inline-flex; }
.klz-btn--ico svg { width: 100%; height: 100%; }
.klz-btn__spin { width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: klz-spin 0.6s linear infinite; }
@keyframes klz-spin { to { transform: rotate(360deg); } }

/* The DS ships `a:hover { text-decoration: underline }` in tokens/base.css.
   The React component renders <a> buttons too, where that underline is wrong. */
a.klz-btn:hover { text-decoration: none; }