/* =========================================================
   CTA Button Component
   ========================================================= */

.cta-button {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;

    /* Spacing — space-3 vertical (12px) × space-5 horizontal (24px) */
    padding: var(--space-3) var(--space-5);

    /* Shape */
    border-radius: var(--radius-md);
    border: 2px solid transparent;

    /* Typography */
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);

    /* Transition */
    transition:
        filter var(--transition-fast) ease,
        background-color var(--transition-fast) ease,
        color var(--transition-fast) ease,
        border-color var(--transition-fast) ease;
}

/* ---------------------------------------------------------
   Primary Variant
   Filled background — brand primary, inverse text
   --------------------------------------------------------- */

.cta-button--primary {
    background-color: var(--color-brand-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-brand-primary);
}

.cta-button--primary:hover,
.cta-button--primary:focus-visible {
    filter: brightness(0.9);
    color: var(--color-text-inverse);
    text-decoration: none;
}

.cta-button--primary:focus-visible {
    outline: 3px solid var(--color-brand-primary);
    outline-offset: 3px;
}

/* ---------------------------------------------------------
   Secondary Variant
   Transparent background — primary border + primary text
   --------------------------------------------------------- */

.cta-button--secondary {
    background-color: transparent;
    color: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
}

.cta-button--secondary:hover,
.cta-button--secondary:focus-visible {
    /*
     * Darken the border and text by 10 % using brightness.
     * A semi-transparent fill is added so the "darkened"
     * effect reads clearly on both light and dark surfaces.
     */
    filter: brightness(0.9);
    text-decoration: none;
}

.cta-button--secondary:focus-visible {
    outline: 3px solid var(--color-brand-primary);
    outline-offset: 3px;
}

/* ---------------------------------------------------------
   Active / pressed state (both variants)
   --------------------------------------------------------- */

.cta-button:active {
    filter: brightness(0.8);
    transform: translateY(1px);
}