/* ================================
   Kahlonetrics — Shared Button Styles
   Requires theme.css variables.

   Usage:
     <button class="kn-btn kn-btn--primary">Save</button>
     <a href="..." class="kn-btn kn-btn--ghost">Cancel</a>
     <button class="kn-btn kn-btn--danger kn-btn--sm">Delete</button>

   Variants: --primary | --secondary | --ghost | --danger
   Sizes:    --sm | --lg | --icon
   ================================ */

.kn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    background: transparent;
    color: var(--color-text);
    transition: background 0.2s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                transform 0.2s ease,
                box-shadow 0.2s ease,
                opacity 0.2s ease;
}

.kn-btn:disabled,
.kn-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ── Primary (filled accent) ─────────── */
.kn-btn--primary {
    background: var(--color-accent);
    color: var(--color-on-accent);
}
.kn-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(233, 69, 96, 0.3);
}

/* ── Secondary (subtle filled) ───────── */
.kn-btn--secondary {
    background: var(--color-tile-bg);
    color: var(--color-text);
    border-color: var(--color-tile-border);
}
.kn-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--color-tile-bg-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--color-shadow);
}

/* ── Ghost (outlined, accent on hover) ── */
.kn-btn--ghost {
    background: transparent;
    color: var(--color-text-muted);
    border-color: var(--color-tile-border);
}
.kn-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--color-accent);
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

/* ── Danger (red outlined) ───────────── */
.kn-btn--danger {
    background: transparent;
    color: var(--color-error);
    border-color: var(--color-error);
}
.kn-btn--danger:hover:not(:disabled):not([aria-disabled="true"]) {
    background: rgba(252, 129, 129, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(252, 129, 129, 0.2);
}

/* ── Sizes ───────────────────────────── */
.kn-btn--sm {
    padding: 6px 14px;
    font-size: 12px;
}
.kn-btn--lg {
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
}
.kn-btn--icon {
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1;
    gap: 0;
}

/* ── Layout modifier: full-width (e.g. for hero submit buttons) ── */
.kn-btn--block {
    width: 100%;
    display: flex;
}