/* ==========================================================================
   BUTTONS — Global component
   Unified button system. Extends the existing .btn base (defined in
   style.css) with additional variants and size modifiers.

   During Tailwind migration, this file coexists with legacy utility
   classes. Loaded after style.css so variants take precedence.
   ========================================================================== */

/* --- Base redefinition (unifies display across agent + lead form) ------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 10px);
    font-weight: 600;
    font-size: 0.95rem;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    border: none;
    text-decoration: none;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
    transition: background var(--transition-base, 0.2s),
                color var(--transition-base, 0.2s),
                transform var(--transition-base, 0.2s),
                box-shadow var(--transition-base, 0.2s);
}

/* --- Color variants ---------------------------------------------------- */
.btn--primary {
    background: var(--color-ink, #0f172a);
    color: #ffffff;
}
.btn--primary:hover {
    background: var(--color-ink-soft, #1e293b);
    color: #ffffff;
}

.btn--ghost {
    background: transparent;
    border: 1px solid var(--color-border-input, #d1d5db);
    color: var(--color-text-body, #4b5563);
}
.btn--ghost:hover {
    background: var(--color-bg-page, #f9fafb);
    color: var(--color-ink, #0f172a);
}

.btn--gold {
    background: var(--color-gold, #d8ae5e);
    color: #0f172a;   /* slightly warmer black, matches design system */
    font-weight: 700;
    box-shadow: var(--shadow-gold, 0 4px 14px rgba(216, 174, 94, 0.30));
}
.btn--gold:hover {
    background: var(--color-gold-active, #c49b4d);
    color: #000000;
    transform: translateY(-1px);
}

.btn--whatsapp {
    background: var(--color-whatsapp, #25D366);
    color: #ffffff;
    font-weight: 700;
    box-shadow: var(--shadow-whatsapp, 0 4px 14px rgba(37, 211, 102, 0.30));
}
.btn--whatsapp:hover {
    background: var(--color-whatsapp-hover, #1da851);
    color: #ffffff;
    transform: translateY(-1px);
}

/* --- Size modifiers ---------------------------------------------------- */
.btn--sm {
    padding: 0.55rem 0.9rem;
    font-size: 0.8rem;
    border-radius: var(--radius-md, 10px);
}

.btn--xs {
    padding: 0.35rem 0.7rem;
    font-size: 0.72rem;
    border-radius: var(--radius-sm, 6px);
}

/* --- Layout modifiers -------------------------------------------------- */
.btn--block {
    width: 100%;
}

.btn--icon {
    padding: 0.5rem;
    aspect-ratio: 1 / 1;
}