/* ARUNA — Button Components
   All variants reference tokens.css. No hardcoded hex values. */

.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-disabled {
    display: inline-block;
    padding: 0.875rem 2rem;
    letter-spacing: 0.05em;
    font-size: 0.875rem;
    font-family: var(--font-body);
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    cursor: pointer;
}

/* ─── Primary ────────────────────────────────────────── */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border: 2px solid var(--color-primary);
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--color-primary);
}

/* ─── Secondary ──────────────────────────────────────── */
.btn-secondary {
    background-color: transparent;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
}

.btn-secondary:hover {
    background-color: var(--color-accent-hover);
    color: var(--color-text-inverse);
}

/* ─── Ghost (for dark / primary-bg sections) ─────────── */
.btn-ghost {
    background-color: transparent;
    color: var(--color-text-inverse);
    border: 2px solid var(--color-text-inverse);
}

.btn-ghost:hover {
    background-color: var(--color-text-inverse);
    color: var(--color-primary);
}

/* ─── Disabled ───────────────────────────────────────── */
.btn-disabled {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border: 2px solid var(--color-primary);
    opacity: 0.4;
    cursor: not-allowed;
}