/* design-tokens.css
   EINZIGE Quelle für alle Design-Variablen (Farben, Abstände, Schatten).

   Diese Datei wird an zwei Stellen genutzt:
     1. Web-CSS: base.html lädt sie zuerst, alle anderen CSS-Dateien nutzen var(--...)
     2. Email-Templates: {% css_var "color-primary" %} liest Werte direkt aus dieser Datei

   → Änderungen hier wirken automatisch auf Website UND Emails.
*/

:root {
    /* ── Markenfarben / Navy ── */
    --color-navy: #181A2B;
    --color-navy-hover: #252740;      /* etwas helleres Navy für Hover */

    /* ── Primärfarbe (Violet) ── */
    --color-primary: #7C3AED;
    --color-primary-dark: #6D28D9;
    --color-primary-light: #EDE9FE;
    --color-primary-shadow: rgba(124, 58, 237, 0.25);
    --color-primary-focus: rgba(124, 58, 237, 0.15);
    --color-primary-hover: #5B21B6;

    /* ── Brand-Gradient-Farben (Amber → Pink → Violet) ── */
    /* Für .btn-brand und besondere Hero-Elemente */
    --color-brand-amber: #F59E0B;
    --color-brand-pink: #EC4899;
    --color-brand-violet: #7C3AED;

    /* ── Status-Farben ── */
    --color-success: #10B981;
    --color-success-dark: #059669;
    --color-success-bg: #D1FAE5;
    --color-danger: #EF4444;
    --color-danger-dark: #DC2626;
    --color-danger-bg: #FEF2F2;
    --color-danger-border: #FECACA;
    --color-warning: #F59E0B;
    --color-warning-light: #FFFBEB;
    --color-warning-dark: #D97706;
    --color-info: #3B82F6;
    --color-info-dark: #2563EB;
    --color-info-light: #EFF6FF;

    /* ── Neutrale Farben / Text / Hintergrund ── */
    --color-neutral: #696A75;
    --color-text: #181A2B;
    --color-text-muted: #696A75;
    --color-text-light: #9CA3AF;
    --color-bg: #FAFAFB;            /* lightBg: 2 % Navy auf Weiß */
    --color-bg-secondary: #F3F4F4;  /* lightSurface: 5 % Navy auf Weiß */
    --color-white: #FFFFFF;
    --color-border: #E3E4E6;
    --color-border-light: #EEEFF1;

    /* ── Inhaltstyp-Farben (Gapfill / Matching / MC-Quiz) ── */
    --color-content-gapfill: #7C3AED;
    --color-content-matching: #3B82F6;
    --color-content-mcquizz: #10B981;

    /* ── Abstände / Radius ── */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;

    /* ── Schatten (Apple-like, weich) ── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 10px 10px 10px -10px rgba(0, 0, 0, 0.20);
    --shadow-lg: 10px 10px 10px -10px rgba(0, 0, 0, 0.30);
    --shadow-hover: 0 8px 24px rgba(124, 58, 237, 0.15);

    /* ── Typografie ── */
    --font-body: 'Montserrat', 'Segoe UI', Tahoma, sans-serif;
    --font-display: 'Cormorant', Georgia, serif;
}