/*
 * Allure – Design-Palette (einzige Quelle für Farben, Abstände, Radien, Schatten).
 *
 * Komponenten verwenden ausschließlich diese Variablen, nie Rohwerte.
 * Modus: ohne data-theme folgt die Seite dem System; <html data-theme="light|dark"> erzwingt einen Modus.
 *
 * Aktionsgruppen (jede Aktion hat überall dieselbe Farbe, siehe docs/DESIGN.md):
 *   create  = grün    anlegen, speichern, bestätigen
 *   edit    = blau    bearbeiten, ändern
 *   delete  = rot     löschen, entfernen
 *   brand   = oliv Hauptaktion der Seite, Fokus, Marke
 *   neutral = grau    zurück, abbrechen, ansehen, sonstige Aktionen
 */

:root {
    color-scheme: light;

    /* Flächen */
    --color-bg: #f6f5f0;
    --color-bg-accent: #eeeee4;
    --color-surface: #ffffff;
    --color-surface-2: #f0f0e9;
    --color-border: #e2e3d8;
    --color-border-strong: #c8cbbd;

    /* Text */
    --color-text: #292e26;
    --color-muted: #6b7165;
    --color-on-accent: #ffffff;

    /* Marke (Oliv/Salbei) */
    --color-brand: #566345;
    --color-brand-hover: #414f31;
    --color-brand-soft: #e9edde;
    --color-brand-text: #435234;

    /* Aktionsgruppen */
    --color-create: #50623f;
    --color-create-hover: #3c4e2d;
    --color-create-soft: #e9efdf;
    --color-create-text: #3f522d;

    --color-edit: #3b6fd4;
    --color-edit-hover: #2f5cb5;
    --color-edit-soft: #e5edfb;
    --color-edit-text: #2a55ae;

    --color-delete: #d1434b;
    --color-delete-hover: #b5343c;
    --color-delete-soft: #fbe6e7;
    --color-delete-text: #a82e36;

    --color-neutral: #62695b;
    --color-neutral-hover: #4b5344;
    --color-neutral-soft: #eeeee7;
    --color-neutral-text: #505847;

    /* Status */
    --color-warning: #c98a14;
    --color-warning-soft: #fbf0d8;
    --color-warning-text: #85580a;

    /* Fokus */
    --focus-ring: 0 0 0 3px rgb(86 99 69 / 0.30);

    /* Abstände */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;

    /* Form */
    --radius-sm: 0.4rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgb(42 35 38 / 0.08);
    --shadow-md: 0 4px 14px rgb(42 35 38 / 0.08), 0 1px 3px rgb(42 35 38 / 0.06);
    --shadow-lg: 0 18px 48px rgb(80 30 55 / 0.14), 0 2px 6px rgb(42 35 38 / 0.06);

    /* Typografie */
    --font-display: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    --sidebar-width: 15.5rem;
    --color-hero: #e9ecdf;
    --color-hero-ink: #36432c;
    --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --control-height: 2.75rem;
    --transition: 160ms ease;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --color-bg: #171b16;
    --color-bg-accent: #20271b;
    --color-surface: #20251d;
    --color-surface-2: #2a3125;
    --color-border: #3b4335;
    --color-border-strong: #56604d;

    --color-text: #eef0e7;
    --color-muted: #b0b7a6;
    --color-on-accent: #ffffff;

    --color-brand: #9eb582;
    --color-brand-hover: #b2c59c;
    --color-brand-soft: #303c25;
    --color-brand-text: #c0d3a9;

    --color-create: #3aa86f;
    --color-create-hover: #4cbb81;
    --color-create-soft: #1d3328;
    --color-create-text: #7fd6a6;

    --color-edit: #5b8ae6;
    --color-edit-hover: #7aa0ee;
    --color-edit-soft: #1f2a42;
    --color-edit-text: #9dbbf5;

    --color-delete: #e0565e;
    --color-delete-hover: #ea727a;
    --color-delete-soft: #3d2023;
    --color-delete-text: #f09ca1;

    --color-neutral: #8c7f85;
    --color-neutral-hover: #a3979c;
    --color-neutral-soft: #332a2f;
    --color-neutral-text: #cfc4c9;

    --color-warning: #e0a636;
    --color-warning-soft: #3a2f16;
    --color-warning-text: #efc774;

    --focus-ring: 0 0 0 3px rgb(158 181 130 / 0.40);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 14px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 18px 48px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.3);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --color-bg: #171b16;
        --color-bg-accent: #20271b;
        --color-surface: #20251d;
        --color-surface-2: #2a3125;
        --color-border: #3b4335;
        --color-border-strong: #56604d;

        --color-text: #eef0e7;
        --color-muted: #b0b7a6;
        --color-on-accent: #ffffff;

        --color-brand: #9eb582;
        --color-brand-hover: #b2c59c;
        --color-brand-soft: #303c25;
        --color-brand-text: #c0d3a9;

        --color-create: #3aa86f;
        --color-create-hover: #4cbb81;
        --color-create-soft: #1d3328;
        --color-create-text: #7fd6a6;

        --color-edit: #5b8ae6;
        --color-edit-hover: #7aa0ee;
        --color-edit-soft: #1f2a42;
        --color-edit-text: #9dbbf5;

        --color-delete: #e0565e;
        --color-delete-hover: #ea727a;
        --color-delete-soft: #3d2023;
        --color-delete-text: #f09ca1;

        --color-neutral: #8c7f85;
        --color-neutral-hover: #a3979c;
        --color-neutral-soft: #332a2f;
        --color-neutral-text: #cfc4c9;

        --color-warning: #e0a636;
        --color-warning-soft: #3a2f16;
        --color-warning-text: #efc774;

        --focus-ring: 0 0 0 3px rgb(158 181 130 / 0.40);

        --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
        --shadow-md: 0 4px 14px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.3);
        --shadow-lg: 0 18px 48px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.3);
    }
}