/* ==============================================
   Farbschema: Rot – Akzentfarben (Light Theme)
   ============================================== */

:root {
    /* ── Primärfarbe ── */
    --primary: #E53935;
    --primary-dark: #C62828;
    --primary-rgb: 229, 57, 53;
    --primary-dark-rgb: 198, 40, 40;

    /* ── Akzentfarbe ── */
    --accent: #EF5350;
    --accent-rgb: 239, 83, 80;

    /* ── Sekundär ── */
    --brown: #B71C1C;
    --brown-rgb: 183, 28, 28;

    /* ── Primary Hintergründe (aufsteigende Deckkraft) ── */
    --primary-bg-faint:    rgba(229, 57, 53, 0.03);
    --primary-bg-subtle:   rgba(229, 57, 53, 0.06);
    --primary-bg-hover:    rgba(229, 57, 53, 0.08);
    --primary-bg-active:   rgba(229, 57, 53, 0.10);
    --primary-bg-emphasis:  rgba(229, 57, 53, 0.12);
    --primary-bg-strong:   rgba(229, 57, 53, 0.15);
    --primary-bg-bold:     rgba(229, 57, 53, 0.25);

    /* ── Primary Rahmen ── */
    --primary-border-subtle:  rgba(229, 57, 53, 0.12);
    --primary-border-default: rgba(229, 57, 53, 0.20);
    --primary-border-hover:   rgba(229, 57, 53, 0.30);
    --primary-border-focus:   rgba(229, 57, 53, 0.35);
    --primary-border-strong:  rgba(229, 57, 53, 0.50);

    /* ── Primary Schatten ── */
    --primary-shadow-sm: rgba(229, 57, 53, 0.12);
    --primary-shadow-md: rgba(229, 57, 53, 0.25);
    --primary-shadow-lg: rgba(229, 57, 53, 0.35);

    /* ── Secondary Varianten ── */
    --brown-bg-subtle: rgba(183, 28, 28, 0.04);
    --brown-bg-hover:  rgba(183, 28, 28, 0.06);

    /* ── Accent Varianten ── */
    --accent-bg-subtle: rgba(239, 83, 80, 0.08);
    --accent-bg-hover:  rgba(239, 83, 80, 0.12);
}