/*
 * _buttons.css
 * Global button styles and reusable button variants
 * Included on all pages
 */


/* ===========================================================
   BASE BUTTON
   =========================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.btn svg {
    flex-shrink: 0;
}


/* ===========================================================
   PRIMARY BUTTON (Red)
   =========================================================== */
.btn-primary {
    color: var(--text-white);
    background-color: var(--color-red);
}

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


/* ===========================================================
   SECONDARY BUTTON (White with navy text)
   =========================================================== */
.btn-secondary {
    color: var(--color-navy);
    background-color: var(--color-white);
}

.btn-secondary:hover {
    background-color: var(--color-gray-100);
    transform: translateY(-2px);
}


/* ===========================================================
   SIZE VARIANTS
   =========================================================== */
.btn-small {
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
}