/* ============================================================
   04-BUTTONS.CSS
   Zentrales Button-System
   ============================================================ */

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.cd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cd-space-xs);

    min-height: 48px;
    padding: 0.85em 1.75em;

    border: var(--cd-button-border);
    border-radius: var(--cd-button-radius);

    font-family: var(--cd-font-body);
    font-weight: var(--cd-fw-semibold);
    font-size: var(--cd-fs-body);
    line-height: 1.2;

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

    color: var(--cd-button-text);
    background: var(--cd-button-bg);
    box-shadow: var(--cd-button-shadow);

    cursor: pointer;
    user-select: none;

    transition:
        background-color var(--cd-transition-base),
        border-color var(--cd-transition-base),
        color var(--cd-transition-base),
        box-shadow var(--cd-transition-base),
        transform var(--cd-transition-fast);
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.cd-btn:hover {
    color: var(--cd-button-text-hover);
    background: var(--cd-button-bg-hover);
    border-color: var(--cd-button-bg-hover);
    box-shadow: var(--cd-button-shadow-hover);
}

button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
.cd-btn:focus-visible {
    outline: none;
    box-shadow: var(--cd-focus-ring);
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
.cd-btn:active {
    transform: translateY(1px);
}

button:disabled,
input:disabled,
.cd-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}


/* Outline */

.cd-btn--outline {
    color: var(--cd-color-primary);
    background: transparent;
    border-color: var(--cd-color-primary);
}

.cd-btn--outline:hover {
    color: var(--cd-color-white);
    background: var(--cd-color-primary);
    border-color: var(--cd-color-primary);
}


/* Secondary */

.cd-btn--secondary {
    color: var(--cd-color-text-on-accent);
    background: var(--cd-color-accent);
    border-color: var(--cd-color-accent);
}

.cd-btn--secondary:hover {
    background: var(--cd-color-accent-soft);
    border-color: var(--cd-color-accent-soft);
}


/* Ghost */

.cd-btn--ghost {
    padding-inline: 0;
    color: var(--cd-color-primary);
    background: transparent;
    border-color: transparent;
}

.cd-btn--ghost:hover {
    color: var(--cd-color-primary-soft);
    background: transparent;
    border-color: transparent;
}


/* On dark */

.cd-btn--on-dark {
    color: var(--cd-color-dark);
    background: var(--cd-color-white);
    border-color: var(--cd-color-white);
}

.cd-btn--on-dark:hover {
    color: var(--cd-color-white);
    background: transparent;
    border-color: var(--cd-color-white);
}


/* Sizes */

.cd-btn--sm {
    min-height: 40px;
    padding: 0.6em 1.25em;
    font-size: var(--cd-fs-small);
}

.cd-btn--lg {
    min-height: 56px;
    padding: 1em 2.25em;
    font-size: var(--cd-fs-h6);
}