/* 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 {
    /* Primärfarbe (Orange-Braun) */
    --color-primary: #B24A02;
    --color-primary-dark: #8f3a01;
    --color-primary-light: #fff3e0;
    --color-primary-shadow: rgba(178, 74, 2, 0.3);
    --color-primary-focus: rgba(178, 74, 2, 0.2);

    /* Status-Farben */
    --color-success: #27ae60;
    --color-success-dark: #218838;
    --color-danger: #e74c3c;
    --color-danger-dark: #c0392b;
    --color-danger-bg: #fdf2f2;
    --color-danger-border: #f5c6cb;
    --color-warning: #f39c12;
    --color-warning-light: #fff8e1;
    --color-warning-dark: #f57c00;
    --color-info: #3498db;
    --color-info-dark: #2980b9;
    --color-info-light: #f0f7ff;

    /* Neutral-Farben */
    --color-neutral: #95a5a6;
    --color-text: #333;
    --color-text-muted: #666;
    --color-text-light: #aaa;
    --color-bg: #f5f5f5;
    --color-bg-secondary: #f8f9fa;
    --color-white: #ffffff;
    --color-border: #ddd;
    --color-border-light: #eee;

    /* Primärfarbe - Hover/Dark-Varianten */
    --color-primary-hover: #6a340d;

    /* Inhaltstyp-Farben (Gapfill / Matching / MC-Quiz) */
    --color-content-gapfill: #8e44ad;
    --color-content-matching: #2980b9;
    --color-content-mcquizz: #16a085;

    /* Abstände */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Schatten */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
}