/**
 * buttons.css - Button Primitives
 *
 * Owns the .btn base class and its three variants. Extracted
 * from components.css in v0.1.0 so the button system can
 * grow in isolation (state variants, size variants, icon
 * support) without inflating the component grab-bag.
 *
 * Typography note: JetBrains Mono is intentional. Bevan at
 * button size reads too weighty next to body copy and would
 * compete with the Bevan-powered nav for attention. Mono
 * keeps action triggers tactile and UI-chrome-y.
 *
 * @package LibrandiOutdoorPower
 * @since   0.1.0
 */


/* ==========================================================
   Base button
   ========================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color var(--duration) var(--ease),
                color            var(--duration) var(--ease),
                border-color     var(--duration) var(--ease),
                transform        var(--duration-fast) var(--ease),
                box-shadow       var(--duration) var(--ease);
}
.btn:active {
    transform: scale(0.97);
}


/* ==========================================================
   Primary -- amber CTA
   The brand's headline action treatment. Used for primary
   conversions (Call, Request a Quote, Submit).
   ========================================================== */
.btn--primary {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}
.btn--primary:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-white);
    box-shadow: 0 4px 14px rgba(var(--color-accent-rgb), .35);
}


/* ==========================================================
   Outline -- green border
   Used on light backgrounds where a secondary action needs
   to be visible without competing with .btn--primary.
   ========================================================== */
.btn--outline {
    background-color: transparent;
    color: var(--color-primary);
    border-color: var(--color-primary);
}
.btn--outline:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}


/* ==========================================================
   Outline light -- white border
   Inverted variant for placement on dark/photographic
   backgrounds (hero, accent sections, footer CTAs).
   ========================================================== */
.btn--outline-light {
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}
.btn--outline-light:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
}