/* =====================================================
   Buttons — Fifth Ave Ltd
   Exactly two variants (RULE 7):
     .btn .btn-primary    → solid gold pill, ink text
     .btn .btn-secondary  → ghost pill (for dark surfaces)
   All values from global.css / dynamic-css.php tokens.
   Never restyle buttons in section files.
   ===================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wide);
    /* Inherit the body leading like the mock — this is what gives
       the buttons their taller pill shape (13+26px padding + 1.6 line) */
    line-height: var(--leading-body);
    padding: 13px 26px;
    border-radius: var(--radius-full);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--ease-base), background-color var(--ease-base), border-color var(--ease-base), color var(--ease-base);
}

.btn svg {
    flex-shrink: 0;
}

/* ---- Primary — solid gold, ink text ---- */
.btn-primary {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: var(--color-text);
}

.btn-primary:hover {
    transform: translateY(-2px);
    background-color: var(--color-primary-light);
    border-color: var(--color-primary-light);
    color: var(--color-text);
}

/* ---- Secondary — ghost outline for dark (ink) surfaces ---- */
.btn-secondary {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--color-white);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: transparent;
}

/* Ghost variant on light surfaces (rare) — ink outline */
.btn-secondary--on-light {
    border-color: var(--color-text);
    color: var(--color-text);
}

.btn-secondary--on-light:hover {
    border-color: var(--color-primary-dark);
    color: var(--color-primary-dark);
}