/* ========================================================================
   Vevero Designsystem — zentrale Design-Tokens
   Wird VOR styles.css geladen. Komponenten greifen ausschließlich auf
   diese Variablen zu; Rohwerte gehören nur hierher.
   ======================================================================== */
:root {
    /* ── Farben ── */
    --primary-color: #0fa46c;
    --secondary-color: #067b52;
    --accent-color: #ecfff6;
    --color-dark-green: #064234;      /* Vertrauen-Section, dunkle Flächen */
    --text-dark: #0b0f0c;
    --text-gray: #5f6b66;
    --text-on-dark: #ffffff;
    --bg-light: #ffffff;
    --bg-gray: #f6f7f9;
    --border-light: #e5e7eb;
    --border-dark: #111827;

    /* Aliase für Bestandscode */
    --primary-green: var(--primary-color);
    --dark-green: var(--secondary-color);
    --light-green: var(--accent-color);

    /* ── Spacing (8-Punkt-Raster) ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;
    --space-8: 96px;
    --section-padding: clamp(64px, 9vw, 100px);

    /* ── Typografie ── */
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Source Sans 3', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --heading-1: clamp(32px, 5vw, 56px);
    --heading-2: clamp(28px, 4vw, 40px);
    --heading-3: clamp(18px, 2.2vw, 22px);
    --body-text: 16px;
    --body-text-lg: clamp(16px, 1.6vw, 20px);
    --text-small: 14px;
    --eyebrow-size: 12px;

    /* ── Radien ── */
    --card-radius: 18px;
    --radius-sm: 12px;
    --radius-pill: 999px;

    /* ── Schatten ── */
    --card-shadow: 0 1px 2px rgba(11, 15, 12, 0.04), 0 12px 30px rgba(11, 15, 12, 0.06);
    --card-shadow-hover: 0 2px 4px rgba(11, 15, 12, 0.05), 0 20px 44px rgba(11, 15, 12, 0.12);
    --shadow-cta: 0 10px 25px rgba(15, 164, 108, 0.3);
}