/* =========================================================
   ALPHA STRIKE — BUTTON COMPONENT
   Version: 1.0
   Status: Locked
   ========================================================= */


/* =========================================================
   1. DEMO FOUNDATION
   ========================================================= */

.alpha-button-demo {
    max-width: var(--alpha-container-max);
    margin: 0 auto;
    padding: var(--alpha-spacing-6);
    color: var(--alpha-text-primary);
    font-family: var(--alpha-font-body);
    font-size: var(--alpha-font-size-body);
    line-height: var(--alpha-line-height-body);
}

.alpha-button-demo__header {
    margin-bottom: var(--alpha-spacing-8);
}

.alpha-button-demo__eyebrow {
    margin: 0 0 var(--alpha-spacing-2);
    color: var(--alpha-text-accent);
    font-size: var(--alpha-font-size-caption);
    letter-spacing: var(--alpha-letter-spacing-label);
}

.alpha-button-demo__title {
    margin: 0 0 var(--alpha-spacing-3);
    color: var(--alpha-text-primary);
    font-family: var(--alpha-font-display);
    font-size: var(--alpha-font-size-h1);
    line-height: var(--alpha-line-height-heading);
}

.alpha-button-demo__description {
    max-width: 720px;
    margin: 0;
    color: var(--alpha-text-secondary);
}

.alpha-button-demo__section {
    margin-top: var(--alpha-spacing-8);
}

.alpha-button-demo__section h2 {
    margin: 0 0 var(--alpha-spacing-4);
    color: var(--alpha-text-primary);
    font-family: var(--alpha-font-display);
    font-size: var(--alpha-font-size-h3);
    line-height: var(--alpha-line-height-heading);
}

.alpha-button-demo__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--alpha-spacing-3);
}


/* =========================================================
   2. BASE BUTTON
   ========================================================= */

.alpha-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--alpha-spacing-2);

    min-width: max-content;

    border: var(--alpha-border-thin) solid transparent;
    border-radius: var(--alpha-radius-md);

    font-family: var(--alpha-font-body);
    font-weight: var(--alpha-font-weight-bold);
    line-height: var(--alpha-line-height-compact);

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color var(--alpha-motion-duration-fast) var(--alpha-motion-ease-standard),
        border-color var(--alpha-motion-duration-fast) var(--alpha-motion-ease-standard),
        color var(--alpha-motion-duration-fast) var(--alpha-motion-ease-standard),
        box-shadow var(--alpha-motion-duration-fast) var(--alpha-motion-ease-standard),
        transform var(--alpha-motion-duration-fast) var(--alpha-motion-ease-standard);
}


/* =========================================================
   3. BUTTON SIZES
   ========================================================= */

.alpha-button--sm {
    min-height: 32px;
    padding: var(--alpha-spacing-2) var(--alpha-spacing-3);
    font-size: var(--alpha-font-size-label);
}

.alpha-button--md {
    min-height: 40px;
    padding: var(--alpha-spacing-2) var(--alpha-spacing-4);
    font-size: var(--alpha-font-size-body);
}

.alpha-button--lg {
    min-height: 48px;
    padding: var(--alpha-spacing-3) var(--alpha-spacing-5);
    font-size: var(--alpha-font-size-body);
}


/* =========================================================
   4. PRIMARY
   ========================================================= */

.alpha-button--primary {
    background: var(--alpha-interactive-default);
    border-color: var(--alpha-interactive-default);
    color: var(--alpha-text-inverse);
}

.alpha-button--primary:hover {
    background: var(--alpha-interactive-hover);
    border-color: var(--alpha-interactive-hover);
    /* Colour-only hover (yellow -> gold) read as too subtle on its own,
       2026-08-13 - the two brand yellows are close in value. Table 16
       forbids shadows/elevation, so added a 1px lift instead: same
       vertical-translate language the button already uses for :active
       (1px down = press), just mirrored (1px up = hover), rather than
       inventing a new motion pattern. */
    transform: translateY(-1px);
}

.alpha-button--primary:active {
    background: var(--alpha-interactive-active);
    border-color: var(--alpha-interactive-active);
    transform: translateY(1px);
}


/* =========================================================
   5. SECONDARY
   ========================================================= */

.alpha-button--secondary {
    background: var(--alpha-surface-secondary);
    border-color: var(--alpha-border-default);
    color: var(--alpha-text-primary);
}

.alpha-button--secondary:hover {
    background: var(--alpha-interactive-hover);
    border-color: var(--alpha-border-accent);
    color: var(--alpha-text-inverse);
    /* Same 1px lift as primary's hover, for a consistent hover language
       across every button variant in this component. */
    transform: translateY(-1px);
}

.alpha-button--secondary:active {
    background: var(--alpha-interactive-active);
    border-color: var(--alpha-interactive-active);
    color: var(--alpha-text-inverse);
    transform: translateY(1px);
}


/* =========================================================
   6. GHOST
   ========================================================= */

.alpha-button--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--alpha-text-accent);
}

.alpha-button--ghost:hover {
    background: var(--alpha-surface-secondary);
    color: var(--alpha-text-primary);
    /* Same 1px lift as primary's hover, for a consistent hover language
       across every button variant in this component. */
    transform: translateY(-1px);
}

.alpha-button--ghost:active {
    background: var(--alpha-surface-tertiary);
    transform: translateY(1px);
}


/* =========================================================
   7. FOCUS
   ========================================================= */

.alpha-button:focus-visible {
    outline: var(--alpha-border-medium) solid var(--alpha-interactive-focus);

    outline-offset: var(--alpha-spacing-1);
}


/* =========================================================
   8. DISABLED
   ========================================================= */

.alpha-button:disabled,
.alpha-button[aria-disabled="true"] {
    background: var(--alpha-interactive-disabled);
    border-color: var(--alpha-interactive-disabled);
    color: var(--alpha-text-primary);

    cursor: not-allowed;
    opacity: var(--alpha-opacity-disabled);

    transform: none;
}


/* =========================================================
   9. ICONS
   ========================================================= */

.alpha-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    font-family: var(--alpha-font-body);
    line-height: 1;
}

.alpha-button__label {
    display: inline-flex;
    align-items: center;
}


/* =========================================================
   10. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .alpha-button {
        transition: none;
    }

    .alpha-button:active {
        transform: none;
    }
}


/* =========================================================
   11. RESPONSIVE
   ========================================================= */

@media (max-width: 640px) {

    .alpha-button-demo {
        padding: var(--alpha-spacing-4);
    }

    .alpha-button-demo__row {
        align-items: stretch;
        flex-direction: column;
    }

    .alpha-button {
        width: 100%;
    }
}