/* ═══════════════════════════════════════════════
   Ákotí Buttons — Pure CSS

   <button class="akoti-btn">Default</button>
   <button class="akoti-btn primary">Save</button>
   <button class="akoti-btn danger">Delete</button>
   <a href="#" class="akoti-btn ghost">Cancel</a>

   Sizes:    .sm, .lg, .xl
   Variants: .primary, .secondary, .success, .danger, .ghost, .link
   States:   .loading (shows spinner), :disabled
   Icons:    <button class="akoti-btn primary"><span class="aki aki-save"></span> Save</button>
   Group:    <div class="akoti-btn-group">...buttons...</div>
   Block:    .akoti-btn-block (full width)
   ═══════════════════════════════════════════════ */

.akoti-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 20px;
  border: 1px solid rgba(26, 47, 94, 0.15);
  border-radius: 14px 5px 14px 5px;
  background: white;
  color: #1e1e24;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
  user-select: none;
  position: relative;
  overflow: hidden;
}

.akoti-btn:hover {
  border-radius: 5px 14px 5px 14px;
  box-shadow: 0 2px 8px rgba(26,47,94,0.1);
  transform: translateY(-1px);
}
.akoti-btn:active { transform: translateY(0) scale(0.97); box-shadow: none; }
.akoti-btn:focus-visible { outline: 2px solid #a8c8e8; outline-offset: 2px; }

/* ── Variants ──────────────────────────────────────── */

.akoti-btn.primary {
  background: #1a2f5e;
  color: white;
  border-color: #1a2f5e;
  box-shadow: 0 2px 6px rgba(26,47,94,0.2);
}
.akoti-btn.primary:hover { background: #243d75; }

.akoti-btn.secondary {
  background: #a8c8e8;
  color: #0f1b3d;
  border-color: #a8c8e8;
}
.akoti-btn.secondary:hover { background: #bdd6f0; }

.akoti-btn.success {
  background: #2e7d32;
  color: white;
  border-color: #2e7d32;
}
.akoti-btn.success:hover { background: #388e3c; }

.akoti-btn.danger {
  background: #c62828;
  color: white;
  border-color: #c62828;
}
.akoti-btn.danger:hover { background: #d32f2f; }

.akoti-btn.warning {
  background: #e65100;
  color: white;
  border-color: #e65100;
}
.akoti-btn.warning:hover { background: #ef6c00; }

.akoti-btn.ghost {
  background: transparent;
  border-color: rgba(26,47,94,0.15);
  color: #1e1e24;
  box-shadow: none;
}
.akoti-btn.ghost:hover { background: rgba(26,47,94,0.04); }

.akoti-btn.link {
  background: transparent;
  border-color: transparent;
  color: #1a2f5e;
  box-shadow: none;
  padding-left: 4px;
  padding-right: 4px;
}
.akoti-btn.link:hover { text-decoration: underline; transform: none; }

.akoti-btn.bronze {
  background: #CD7F32;
  color: white;
  border-color: #CD7F32;
}
.akoti-btn.bronze:hover { background: #d8923f; }

/* ── Sizes ─────────────────────────────────────────── */

.akoti-btn.sm { padding: 5px 12px; font-size: 11px; border-radius: 10px 4px 10px 4px; }
.akoti-btn.sm:hover { border-radius: 4px 10px 4px 10px; }

.akoti-btn.lg { padding: 12px 28px; font-size: 15px; border-radius: 18px 6px 18px 6px; }
.akoti-btn.lg:hover { border-radius: 6px 18px 6px 18px; }

.akoti-btn.xl { padding: 16px 36px; font-size: 17px; font-weight: 700; border-radius: 20px 8px 20px 8px; }
.akoti-btn.xl:hover { border-radius: 8px 20px 8px 20px; }

/* ── Block ─────────────────────────────────────────── */

.akoti-btn-block { width: 100%; }

/* ── Icon-only ─────────────────────────────────────── */

.akoti-btn.icon-only { padding: 9px; min-width: 38px; }
.akoti-btn.icon-only.sm { padding: 5px; min-width: 28px; }
.akoti-btn.icon-only.lg { padding: 12px; min-width: 48px; }

/* ── Loading ───────────────────────────────────────── */

.akoti-btn.loading { pointer-events: none; opacity: 0.8; }
.akoti-btn.loading::after {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: akoti-btn-spin 0.6s linear infinite;
  flex-shrink: 0;
}
.akoti-btn.ghost.loading::after,
.akoti-btn.link.loading::after {
  border-color: rgba(0,0,0,0.1);
  border-top-color: currentColor;
}

@keyframes akoti-btn-spin { to { transform: rotate(360deg); } }

/* ── Disabled ──────────────────────────────────────── */

.akoti-btn:disabled, .akoti-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Button Group ──────────────────────────────────── */

.akoti-btn-group {
  display: inline-flex;
}
.akoti-btn-group .akoti-btn {
  border-radius: 0;
  margin-left: -1px;
}
.akoti-btn-group .akoti-btn:first-child { border-radius: 14px 0 0 14px; margin-left: 0; }
.akoti-btn-group .akoti-btn:last-child { border-radius: 0 5px 14px 0; }
.akoti-btn-group .akoti-btn:hover { z-index: 1; }

/* ── Icon sizing inside buttons ────────────────────── */

.akoti-btn .aki { font-size: 15px; }
.akoti-btn.sm .aki { font-size: 13px; }
.akoti-btn.lg .aki { font-size: 18px; }

/* ── Dark mode ─────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .akoti-btn { background: #2a2a32; color: #e0e0e4; border-color: rgba(255,255,255,0.1); }
  :root:not([data-theme="light"]) .akoti-btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
  :root:not([data-theme="light"]) .akoti-btn.primary { background: #a8c8e8; color: #0f1b3d; border-color: #a8c8e8; }
  :root:not([data-theme="light"]) .akoti-btn.ghost { background: transparent; color: #e0e0e4; }
  :root:not([data-theme="light"]) .akoti-btn.ghost:hover { background: rgba(255,255,255,0.06); }
  :root:not([data-theme="light"]) .akoti-btn.link { color: #a8c8e8; }
}