/*
 * Zentrale Variablen für die Mental‑Health‑App "Moments of Growth".
 *
 * Diese Datei definiert die grundlegenden Farben, Abstände, Typografie
 * und Effekte, die in der gesamten Anwendung verwendet werden. Sie ist
 * als einzige Quelle der Wahrheit für das Design gedacht, sodass
 * Anpassungen an einem Ort die Optik der gesamten App verändern.
 *
 * Hinweise:
 * – Die Farbpalette ist bewusst weich und freundlich gewählt, um
 *   Harmonie und Motivation zu vermitteln. Primär- und Sekundärfarben
 *   basieren auf Pastelltönen, ergänzt durch klare Zustandsfarben.
 * – Abstände und Radien sind so gewählt, dass sie sowohl auf
 *   Mobilgeräten als auch auf größeren Bildschirmen angenehm wirken.
 * – Sämtliche Variablen sind mehrsprachig benannt, damit ihre
 *   Bedeutung auch ohne Dokumentation nachvollziehbar bleibt.
 */

:root {
    /* === Farbpalette === */
    /* Hauptfarbe (sanftes Grün) und dunklere Variante für Hover‑Zustände */
    --color-primary: #48B685;
    --color-primary-dark: #34986F;

    /* Akzentfarbe (warmgelbes/bernsteinfarbenes Pastell) */
    --color-accent: #FFC857;

    /* Zustandsfarben */
    --color-success: #5CBF80;
    --color-error: #E57373;
    --color-warning: #FFCA28;

    /* Zusätzliche Akzentfarben */
    /* Pastellblau für Mood‑Check Karten und weitere blaue Akzente */
    --color-blue: #4A90E2;
    --color-blue-dark: #357ABD; /* Hover-Zustand für blaue Buttons */
    /* Pastellviolett für Erfolge-Karten, damit diese sich klar von den
       Zielkarten unterscheiden. Die Farbe wurde so gewählt, dass sie
       genügend Kontrast zu Weiß bietet und angenehm warm wirkt. */
    --color-purple: #B39EB5;
    --color-purple-dark: #836B8F; /* Hover-Zustand für violette CTA-Buttons */

    /* Streak-Farbe (Feuer-Orange) für Streak-Badges */
    --color-streak: #FF5722;
    --color-streak-dark: #F4511E;

    /* Helle Akzent-Variante (warm gelb/amber) */
    --color-accent-light: #FFF5D9;

    /* Dunklere Text-Varianten für farbige Statusflächen */
    --color-success-text: #2E7D32;  /* Text auf grünem Hintergrund */
    --color-error-text: #B71C1C;    /* Text auf rotem Hintergrund */
    --color-accent-text: #E65100;   /* Text auf orangem/amber Hintergrund */

    /* Warnfarben für Hinweisboxen und Modal-Warnungen */
    --color-warning-bg: #FFF3CD;
    --color-warning-text: #856404;
    --color-warning-border: #FFEAA7;

    /* Helle Varianten für Statusfarben, genutzt für Benachrichtigungsfelder,
       Alerts und Gradienten. Die Werte sind bewusst sehr hell gewählt,
       um einen warmen Pastellton zu erzeugen und gleichzeitig genügend
       Kontrast zu den dunkleren Textfarben zu bieten. */
    --color-primary-light: #95D7B8; /* hellere Variante der Hauptfarbe */
    --color-green-light: #E1F3EC;   /* Hintergrund für Success und Info */
    --color-blue-light: #EAF2FA;    /* Hintergrund für Mood‑Check Alerts */
    --color-purple-light: #F3F0F7;  /* Hintergrund für Erfolgs‑Benachrichtigungen */
    --color-red-light: #FFE8E8;     /* Hintergrund für Fehler-Alerts */

    /* Neutrale Flächen */
    /*
     * Die Hintergrundfarbe wurde leicht aufgehellt und wärmer gestaltet, um
     * einen höheren Kontrast zu den weißen Karten zu schaffen. Durch den
     * zarten Pastellton wirkt die Anwendung weniger kalt und erleichtert
     * gleichzeitig das Lesen auf Mobilgeräten. Dieser Farbton erfüllt
     * einen besseren Kontrast zu Weiß nach den WCAG‑Empfehlungen für
     * Oberflächenfarben.
     */
    --color-background: #F8FBF9;
    --color-surface: #FFFFFF;
    --color-border: #DDE4E2;

    /* Texte */
    --color-text-primary: #2E3A3C;
    --color-text-secondary: #607D8B;

    /* === Typografie === */
    --font-family-base: 'Segoe UI', 'Roboto', 'Arial', sans-serif;
    --font-size-sm: 0.875rem;        /* 14px für Nebeninformationen */
    --font-size-base: 1rem;          /* 16px Basisschriftgröße */
    --font-size-lg: 1.25rem;         /* 20px für wichtige Werte */
    --font-size-xl: 1.75rem;         /* 28px für Überschriften */
    --font-size-2xl: 2rem;           /* 32px für Seitenüberschriften */
    --font-size-3xl: 2.5rem;         /* 40px für Hero-Überschriften */

    /* === Abstände (Margin & Padding) === */
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.75rem;  /* 12px */
    --spacing-md: 1.25rem;  /* 20px */
    --spacing-lg: 2rem;     /* 32px */
    --spacing-xl: 3rem;     /* 48px */

    /* === Radien === */
    /*
     * Abgestufte Abrundungen für verschiedene Komponenten:
     * sm für Badges und Tags, md für Buttons und Inputs,
     * lg für Karten und Modale.
     */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    /* === Schatten === */
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12);

    /* === Animation === */
    --transition-duration: 0.3s;
}