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