/* LebenstraumGrün – zentrale Design-Tokens (Design Guide v1.0, Konzeptstand November 2026).
   Vorläufige Werte; nach Lieferung des Original-Logos final abstimmen.
   Die vier Markenfarben forest, terracotta, cream und ink können im Cockpit überschrieben werden
   (Einstellungen). Alles andere wird hier zentral gepflegt. */
:root {
    --color-forest: #16332A;
    --color-pine: #24493A;
    --color-sage: #7E9B7A;
    --color-terracotta: #B3573D;
    --color-terracotta-deep: #8E3F29;
    --color-cream: #F3F5EF;
    --color-stone: #E4EADF;
    --color-ink: #15211B;
    --color-muted: #52625A;
    --color-border: #CFD8CB;
    --color-white: #FFFFFF;

    --surface-page: var(--color-cream);
    --surface-panel: var(--color-white);
    --surface-soft: var(--color-stone);
    --text-primary: var(--color-ink);
    --text-secondary: var(--color-muted);
    --border-default: var(--color-border);
    --action-primary: var(--color-forest);
    --action-primary-hover: var(--color-pine);
    --focus-ring: var(--color-forest);

    /* Statusfarben im Cockpit: eigene semantische Rolle, nicht die Markenfarben */
    --status-neutral-bg: #EEF0EC;  --status-neutral-fg: #3F4B44;
    --status-info-bg: #E2E9F1;     --status-info-fg: #23405E;
    --status-ok-bg: #E1EADB;       --status-ok-fg: #2A5128;
    --status-warn-bg: #F5E0A5;     --status-warn-fg: #5E4300;
    --status-danger-bg: #F5D4CB;   --status-danger-fg: #84291A;

    --font-display: 'Inter Display', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --space-1: 4px; --space-2: 8px; --space-3: 12px;
    --space-4: 16px; --space-6: 24px; --space-8: 32px;
    --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px;

    --radius-image: 6px;
    --radius-button: 5px;
    --radius-panel: 12px;

    --container-width: 1440px;
    --gutter: clamp(20px, 5vw, 80px);
    --section-space: clamp(72px, 11vw, 160px);

    --motion-fast: 160ms;
    --motion-normal: 240ms;
    --ease-standard: cubic-bezier(.22, 1, .36, 1);
}

button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}