/*
 * m0 Design System — Components: Buttons (CANONICAL)
 * .back-btn (ghost secondary), .action-btn (filled primary), .export-btn (small ghost).
 * Token-driven, no literal px/hex/rgba.
 */

.back-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--text-accent) 30%, transparent);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: 'Orbitron', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-fast);
}
.back-btn:hover {
    border-color: color-mix(in srgb, var(--text-accent) 60%, transparent);
    color: var(--text-secondary);
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--primary-blue);
    color: var(--dark-bg);
    border: none;
    border-radius: var(--radius-md);
    font-family: 'Orbitron', monospace;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--duration-fast);
}
.action-btn:hover {
    background: color-mix(in srgb, var(--primary-blue) 85%, var(--patriot-white));
}

.export-btn {
    padding: var(--spacing-xs) var(--spacing-md);
    background: color-mix(in srgb, var(--card-bg) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-accent) 20%, transparent);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: 'Orbitron', monospace;
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-fast);
}
.export-btn:hover {
    border-color: color-mix(in srgb, var(--text-accent) 50%, transparent);
    color: var(--patriot-white);
}

/* .btn-primary / .btn-secondary — the shared button-variant family.
 * The canonical overrides the monolith's scattered duplicates (3× each). */
.btn-primary {
    background: linear-gradient(135deg, var(--secondary-blue), var(--primary-blue));
    color: var(--patriot-white);
    box-shadow: var(--shadow-glow-blue);
}
.btn-primary:hover:not(:disabled) {
    transform: translateY(-0.125rem);
    box-shadow: var(--shadow-glow-blue);
}
.btn-secondary {
    background: transparent;
    color: var(--primary-blue);
    border: 0.125rem solid var(--primary-blue);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--primary-blue);
    color: var(--dark-bg);
    box-shadow: var(--shadow-glow-blue);
}