/* ==========================================================================
   DRK Design Tokens
   Zentrale Stelle fuer alle Marken-Werte. Wo immer moeglich sind die Werte
   direkt aus dem DRK-Styleguide belegt. Sekundaerwerte, die dort hinter dem
   Login liegen, sind mit "PRUEFEN" markiert und aus deinem Styleguide-Zugang
   exakt zu ersetzen. Da alles ueber Variablen laeuft, genuegt eine Aenderung
   hier fuer das gesamte UI.

   Belegte Primaerwerte (Quelle: styleguide.drk.de):
     DRK-Rot        RGB 230/0/5     -> #E60005
     Softrot        RGB 228/100/80  -> #E46450   (Icons)
     Dunkelrot      RGB 165/30/15   -> #A51E0F   (Hover/Mouseover)
   Schrift:
     Headlines      Merriweather (Serif)  -> auf weiss in DRK-Rot
     Fliesstext     Helvetica/Arial (Sans) -> schwarz
   ========================================================================== */

:root {
    /* Primaerfarben (belegt) */
    --drk-red:        #E60005;
    --drk-red-soft:   #E46450;
    --drk-red-dark:   #A51E0F;
    --drk-black:      #000000;
    --drk-white:      #FFFFFF;

    /* Sekundaerfarben (PRUEFEN: exakte Werte aus Styleguide einsetzen) */
    --drk-blue-dark:  #154194; /* PRUEFEN: DRK-Dunkelblau */
    --drk-blue-light: #E7EEF6; /* PRUEFEN: DRK-Hellblau */

    /* Grautoene / Flaechen */
    --gray-900: #1a1a1a;
    --gray-700: #444444;
    --gray-500: #6b6b6b;
    --gray-300: #d4d4d4;
    --gray-200: #e6e6e6;
    --gray-100: #f2f2f2;
    --gray-050: #f8f8f8;

    /* Semantische Rollen */
    --color-text:        var(--drk-black);
    --color-text-muted:  var(--gray-500);
    --color-heading:     var(--drk-red);
    --color-bg:          var(--gray-050);
    --color-surface:     var(--drk-white);
    --color-border:      var(--gray-300);
    --color-primary:     var(--drk-red);
    --color-primary-hover:var(--drk-red-dark);
    --color-focus:       var(--drk-blue-dark);

    --color-error-bg:    #fdecec;
    --color-error-fg:    #8a1010;
    --color-info-bg:     var(--drk-blue-light);
    --color-info-fg:     var(--drk-blue-dark);

    /* Typografie */
    --font-head: "Merriweather", Georgia, "Times New Roman", serif;
    --font-body: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;

    --fs-100: 0.8125rem;
    --fs-200: 0.9375rem;
    --fs-300: 1rem;
    --fs-400: 1.125rem;
    --fs-500: 1.375rem;
    --fs-600: 1.75rem;
    --fs-700: 2.25rem;

    /* Abstaende / Radius / Schatten */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;

    --radius-sm: 4px;
    --radius:    8px;
    --radius-lg: 14px;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
    --shadow:    0 4px 12px rgba(0,0,0,.08);

    --maxw: 1120px;
}