/* =============================================================
   variables.css – Design-Tokens / CSS Custom Properties
   NWI-Portal
   Keine Regeln hier, nur :root-Variablen.
   ============================================================= */

:root {
    /* ── Primärfarben ──────────────────────────────────────── */
    --color-primary:        #003f87;
    --color-primary-light:  #0056b3;
    --color-primary-dark:   #002a5c;
    --color-primary-text:   #ffffff;

    /* ── Surface-Hierarchie (Material Design 3) ────────────── */
    /* Heller → Dunkler: lowest ist am hellsten (weiß), highest am dunkelsten */
    --color-surface:                  #f8f9fa;
    --color-surface-bright:           #ffffff;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low:    #f3f4f5;
    --color-surface-container:        #edeeef;
    --color-surface-container-high:   #e7e8e9;
    --color-surface-container-highest:#e1e3e4;
    --color-surface-dim:              #d9dadb;

    /* ── Text-Farben ───────────────────────────────────────── */
    --color-on-surface:         #191c1d;
    --color-on-surface-variant: #424752;
    --color-text:               #191c1d;
    --color-text-muted:         #424752;
    --color-text-placeholder:   #9da3af;

    /* ── Rahmen ────────────────────────────────────────────── */
    --color-border:           #c2c6d4;          /* outline-variant */
    --color-border-subtle:    rgba(194, 198, 212, 0.25); /* ghost border */
    --color-outline:          #727784;
    --color-outline-variant:  #c2c6d4;

    /* ── Sekundärfarben ────────────────────────────────────── */
    --color-secondary:             #4c5e84;
    --color-secondary-container:   #bfd2fd;
    --color-on-secondary-container:#475a7f;

    /* ── Semantische Farben ────────────────────────────────── */
    --color-success:  #2e7d32;
    --color-warning:  #e65100;
    --color-error:    #ba1a1a;
    --color-info:     #003f87;

    /* ── Hintergrund (Kompatibilitäts-Aliase) ──────────────── */
    --color-bg:       var(--color-surface);
    --color-bg-white: var(--color-surface-container-lowest);

    /* ── Grau-System (Kompatibilitäts-Aliase) ──────────────── */
    --color-gray-50:   var(--color-surface-container-lowest);
    --color-gray-100:  var(--color-surface-container-low);
    --color-gray-200:  var(--color-surface-container);
    --color-gray-300:  var(--color-surface-container-high);
    --color-gray-400:  var(--color-surface-container-highest);
    --color-gray-500:  var(--color-outline);
    --color-gray-600:  var(--color-on-surface-variant);
    --color-gray-700:  #333740;
    --color-gray-800:  #252830;
    --color-gray-900:  var(--color-on-surface);

    /* ── Header ────────────────────────────────────────────── */
    --color-header-bg:      #003f87;
    --color-header-text:    #ffffff;
    --color-header-row2-bg: #0056b3;
    --color-header-row3-bg: #1565c0;

    /* ── Footer / Statusleiste ─────────────────────────────── */
    --color-footer-bg:   #191c1d;
    --color-footer-text: #9da3af;

    /* ── Typografie ────────────────────────────────────────── */
    --font-family:          'Inter', sans-serif;
    --font-family-headline: 'Manrope', sans-serif;
    --font-family-body:     'Inter', sans-serif;
    --font-size-xs:   11px;
    --font-size-sm:   12px;
    --font-size-base: 14px;
    --font-size-lg:   16px;
    --font-size-xl:   20px;
    --font-size-h1:   24px;
    --font-weight-normal:  400;
    --font-weight-medium:  500;
    --font-weight-semibold:600;
    --font-weight-bold:    700;
    --line-height-base: 1.5;

    /* ── Abstände ──────────────────────────────────────────── */
    --spacing-xs:  4px;
    --spacing-sm:  8px;
    --spacing-md:  16px;
    --spacing-lg:  24px;
    --spacing-xl:  32px;
    --spacing-2xl: 48px;
    /* Kurzform-Aliase (für help.css und ältere Komponenten) */
    --spacing-s:   var(--spacing-sm);
    --spacing-m:   var(--spacing-md);
    --spacing-l:   var(--spacing-lg);

    /* ── Radien ────────────────────────────────────────────── */
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* ── Schatten ──────────────────────────────────────────── */
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:  0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg:  0 12px 24px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.05);
    --shadow-xl:  0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.08);

    /* ── Gradient ──────────────────────────────────────────── */
    --gradient-primary: linear-gradient(135deg, #003f87 0%, #0056b3 100%);

    /* ── Header-Höhen ──────────────────────────────────────── */
    --header-row1-height: 46px;
    --header-row2-height: 0px;
    --header-row3-height: 0px;
    --header-total-height: var(--header-row1-height);
    --header-row1-only-height: var(--header-row1-height);

    /* ── Footer-Höhe ───────────────────────────────────────── */
    --footer-height: 36px;

    /* ── Transitions ───────────────────────────────────────── */
    --transition-fast:   0.1s ease;
    --transition-normal: 0.2s ease;
    --transition-slow:   0.3s ease;

    /* ── Z-Index-Skala ─────────────────────────────────────── */
    --z-dropdown:  100;
    --z-modal:     200;
    --z-toast:     300;
    --z-header:    50;
}