/* ============================================================
   04-BUTTONS.CSS
   Buttons (Core — plattform-unabhängig)
   ------------------------------------------------------------
   STANDARD = minimalistischer Outline-Pill in Gold (laut CD S.5).
   Schrift: Libre Baskerville Regular. Hover füllt sich gold
   mit dunklem Text.
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   1. BASIS-STYLE — Outline-Gold (greift automatisch)
   ──────────────────────────────────────────────────────────── */

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);

    padding: 0.8em 1.9em;
    border-radius: var(--cd-radius-pill);
    border: 1px solid var(--cd-color-primary);

    /* Libre Baskerville Regular (CD: Button-Font = Regular) */
    font-family: var(--cd-font-body);
    font-weight: var(--cd-fw-medium);
    font-size: var(--cd-fs-body);
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;

    background-color: transparent;
    color: var(--cd-color-primary);

    cursor: pointer;
    user-select: none;

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


/* ────────────────────────────────────────────────────────────
   2. HOVER-STATE — füllt sich gold
   ──────────────────────────────────────────────────────────── */

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


/* ────────────────────────────────────────────────────────────
   3. FOCUS-STATE (Tastatur-Navigation)
   ──────────────────────────────────────────────────────────── */

button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
.cd-btn:focus-visible {
    outline: 2px solid var(--cd-color-primary);
    outline-offset: 3px;
}


/* ────────────────────────────────────────────────────────────
   4. ACTIVE-STATE
   ──────────────────────────────────────────────────────────── */

button:active,
.cd-btn:active {
    transform: translateY(1px);
}


/* ────────────────────────────────────────────────────────────
   5. DISABLED-STATE
   ──────────────────────────────────────────────────────────── */

button:disabled,
input:disabled,
.cd-btn:disabled,
.cd-btn.is-disabled {
    border-color: var(--cd-color-border);
    color: var(--cd-color-text-muted);
    background-color: transparent;
    cursor: not-allowed;
    pointer-events: none;
}


/* ============================================================
   VARIANTEN — Modifier-Klassen
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   VARIANTE: Solid — gefülltes Gold
   ────────────────────────────────────────────────────────────
   Für prominente Haupt-CTAs (z.B. „In den Warenkorb").
   ──────────────────────────────────────────────────────────── */

button.cd-btn--solid,
.cd-btn--solid {
    background-color: var(--cd-color-primary);
    border-color: var(--cd-color-primary);
    color: var(--cd-color-text-on-primary);
}

button.cd-btn--solid:hover,
.cd-btn--solid:hover {
    background-color: var(--cd-color-primary-soft);
    border-color: var(--cd-color-primary-soft);
    color: var(--cd-color-text-on-primary);
}


/* ────────────────────────────────────────────────────────────
   VARIANTE: Light — Outline in Hell (für Bild-/Dunkelflächen)
   ────────────────────────────────────────────────────────────
   Wenn Gold auf einem Foto zu wenig Kontrast hat.
   ──────────────────────────────────────────────────────────── */

button.cd-btn--light,
.cd-btn--light {
    background-color: transparent;
    border-color: var(--cd-color-text);
    color: var(--cd-color-text);
}

button.cd-btn--light:hover,
.cd-btn--light:hover {
    background-color: var(--cd-color-text);
    border-color: var(--cd-color-text);
    color: var(--cd-color-bg);
}


/* ────────────────────────────────────────────────────────────
   VARIANTE: Ghost — Text-Link-artiger Button
   ──────────────────────────────────────────────────────────── */

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

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


/* ────────────────────────────────────────────────────────────
   GRÖSSEN-VARIANTEN
   ──────────────────────────────────────────────────────────── */

.cd-btn--sm {
    padding: 0.55em 1.35em;
    font-size: var(--cd-fs-small);
}

.cd-btn--lg {
    padding: 1em 2.5em;
    font-size: var(--cd-fs-h6);
}