/*
 * Miarto Studio – Button-System
 *
 * Basis: .btn
 * Varianten: --primary, --secondary, --outline, --ghost
 * Größen: --sm, --lg
 * Zustände: :hover, :focus, :disabled
 */

/* ---- Basis ---- */

.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--ms-space-2);
    padding:         var(--ms-space-3) var(--ms-space-6);
    font-family:     var(--ms-font-body);
    font-size:       0.875rem;
    font-weight:     600;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    text-decoration: none;
    border:          2px solid transparent;
    border-radius:   var(--ms-radius-pill);
    cursor:          pointer;
    transition:      background var(--ms-transition),
                     color var(--ms-transition),
                     border-color var(--ms-transition),
                     box-shadow var(--ms-transition);
    white-space:     nowrap;
    line-height:     1;
}

.btn:focus-visible {
    outline:        3px solid var(--ms-accent);
    outline-offset: 3px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor:  not-allowed;
    pointer-events: none;
}

/* ---- Primär ---- */

.btn--primary {
    background:  var(--ms-text);
    color:       var(--ms-bg);
    border-color: var(--ms-text);
}

.btn--primary:hover {
    background:   var(--ms-accent);
    border-color: var(--ms-accent);
    color:        var(--ms-color-anthracite);
}

/* ---- Sekundär ---- */

.btn--secondary {
    background:  var(--ms-accent);
    color:       var(--ms-color-anthracite);
    border-color: var(--ms-accent);
}

.btn--secondary:hover {
    background:   var(--ms-accent-dark);
    border-color: var(--ms-accent-dark);
    color:        var(--ms-color-anthracite);
}

/* ---- Outline ---- */

.btn--outline {
    background:  transparent;
    color:       var(--ms-text);
    border-color: var(--ms-text);
}

.btn--outline:hover {
    background:  var(--ms-text);
    color:       var(--ms-bg);
}

/* ---- Outline Gold ---- */

.btn--outline-gold {
    background:  transparent;
    color:       var(--ms-accent);
    border-color: var(--ms-accent);
}

.btn--outline-gold:hover {
    background:  var(--ms-accent);
    color:       var(--ms-color-white);
}

/* ---- Ghost (kein Rahmen, kein Hintergrund) ---- */

.btn--ghost {
    background:   transparent;
    color:        var(--ms-text);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

.btn--ghost:hover {
    color: var(--ms-accent);
}

/* ---- Größen ---- */

.btn--sm {
    padding:   var(--ms-space-2) var(--ms-space-4);
    font-size: 0.75rem;
}

.btn--lg {
    padding:   var(--ms-space-4) var(--ms-space-8);
    font-size: 1rem;
}

/* ---- Icon-Button (quadratisch, nur Icon) ---- */

.btn--icon {
    width:   40px;
    height:  40px;
    padding: 0;
}

.btn--icon.btn--lg {
    width:  48px;
    height: 48px;
}

/* ---- WordPress Gutenberg Block-Buttons ---- */

.wp-block-button .wp-block-button__link {
    border-radius:   var(--ms-radius-pill) !important;
    font-family:     var(--ms-font-body);
    font-weight:     600;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    font-size:       0.875rem;
    transition:      background var(--ms-transition), color var(--ms-transition);
}