/* 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;

    /* ---------------------------------------------------------------
       edda v3 - die Werte der App (lib/core/theme/app_theme_v3.dart)

       Sie gelten fuer die Seiten, die NUTZER sehen: Login, Registrierung,
       Passwort, Profil. Der Verwaltungsbereich behaelt die Werte oben -
       er ist ein internes Werkzeug und muss nicht wie die App aussehen.

       **Achtung, eine Abweichung ist bewusst stehen geblieben:**
       `--color-primary` (#B24A02) ist NICHT `--v3-orange` (#C65200). Die
       obere Farbe steckt auch in den Mail-Vorlagen; sie anzugleichen
       aendert das Aussehen bereits abgestimmter Mails und ist deshalb
       eine Entscheidung, keine Aufraeumarbeit. Bis dahin: Wer eine
       Nutzerseite baut, nimmt die v3-Werte.
       --------------------------------------------------------------- */
    --v3-orange: #C65200;
    --v3-orange-hell: #F8E5D3;
    --v3-purple: #5B2DE3;
    --v3-schwarz: #161616;
    --v3-grau-text: #757575;
    --v3-grau-rand: #EEEEEE;
    --v3-grau-platzhalter: #C7C7C7;
    --v3-flaeche: #E9E7F2;
    --v3-rot: #9E2B2B;
    --v3-gruen: #2A8C79;

    --v3-radius-karte: 24px;
    --v3-radius-feld: 15px;
    --v3-radius-marke: 12px;
    --v3-feldhoehe: 52px;

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

    /* Pastell-Hintergründe (Dashboard-Karten, Alert-/Info-Hintergründe) */
    --color-bg-pastel-blue:   #e3f2fd;
    --color-bg-pastel-green:  #e8f5e9;
    --color-bg-pastel-red:    #fff0f0;
    --color-bg-pastel-purple: #f0e6ff;
    --color-bg-pastel-yellow: #fff3cd;
    --color-bg-pastel-pink:   #f8d7da;

    /* Alert-Paare (Bootstrap-Stil; Hintergrund + dunklere Textfarbe) */
    --color-alert-success-bg:   #d4edda;
    --color-alert-success-text: #155724;
    --color-alert-danger-text:  #721c24;
    --color-alert-warning-text: #856404;
    --color-alert-info-bg:      #d1ecf1;
    --color-alert-info-text:    #0c5460;

    /* Soft-Badge-Paare (helle Hintergründe + farblich passender Rand) */
    --color-badge-info-bg:     #e8f4fd;
    --color-badge-info-border: #bcdffb;

    --color-badge-success-bg:     #e8f8ee;
    --color-badge-success-border: #b8e6c8;

    --color-badge-warning-border: #f6d27a;

    /* Owner-Badge: eigenes Gold-Schema, nicht aus den Status-Tokens ableitbar */
    --color-badge-owner-bg:     #fff7d6;
    --color-badge-owner-text:   #8a6d00;
    --color-badge-owner-border: #f1d877;

    /* Mitgliedstyp-Badges (in companies.css): solide Standardfarben */
    --color-member-owner-bg:   #ffeb3b;
    --color-member-student-bg: #4caf50;

    /* Mitgliedstyp-Badges auf der Company-Management-Seite (Overrides): Pastell + Akzent */
    --color-member-owner-page-text:    #1565c0;
    --color-member-student-page-bg:    #f3e5f5;
    --color-member-student-page-text:  #6a1b9a;

    /* Neutral-Grau-Skala (Bootstrap-Stil) für UI-Hintergründe und Ränder */
    --color-neutral-100: #f8f9fa;
    --color-neutral-200: #e9ecef;
    --color-neutral-300: #dee2e6;
    --color-neutral-500: #adb5bd;
    --color-neutral-700: #6c757d;

    /* Keyword-Tag (Sub-Variante des Info-Badges) */
    --color-keyword-tag-border: #b3d9f2;

    /* Quiz-Badge: Google-blau, eigenes Schema */
    --color-quiz-badge-bg:   #e8f0fe;
    --color-quiz-badge-text: #3367d6;

    /* Info-Panel (Admin-Tools / aufklappbare Erläuterungen) */
    --color-info-panel-bg:     #e7f3ff;
    --color-info-panel-border: #b3d9ff;
    --color-info-panel-text:   #004085;

    /* 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);
}