/**
 * CSS Design System Variables
 * Zentrale Variablen-Datei für das gesamte Projekt
 * Extrahiert aus bestandsuebertragung-vst.css
 */

/* ========================================
   CSS VARIABLEN - REFINED DESIGN SYSTEM
   ======================================== */
:root {
    /* Primary Brand - ERGO Red (used sparingly for accents) */
    --primary: #C8102E;
    --primary-dark: #9A0C23;
    --primary-light: #DC3545;
    --primary-subtle: rgba(200, 16, 46, 0.08);

    /* Secondary - Professional Dark */
    --secondary: #0F172A;
    --secondary-light: #1E293B;

    /* Neutral Palette - More refined grays */
    --surface: #FFFFFF;
    --surface-elevated: #FFFFFF;
    --surface-subtle: #F8FAFC;
    --background: #F1F5F9;
    --border: #E2E8F0;
    --border-strong: #CBD5E1;

    /* Text Hierarchy */
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-tertiary: #64748B;
    --text-muted: #94A3B8;
    --text-inverse: #FFFFFF;

    /* Status Colors - Harmonized, less saturated */
    --status-unvollstaendig: #EA580C;
    --status-zu-validieren: #2563EB;
    --status-export-bereit: #16A34A;
    --status-abgeschlossen: #7C3AED;
    --status-abgelehnt: #DC2626;
    --status-wiedervorlage: #D97706;

    /* Status Backgrounds - Very subtle */
    --status-bg-orange: rgba(234, 88, 12, 0.08);
    --status-bg-blue: rgba(37, 99, 235, 0.08);
    --status-bg-green: rgba(22, 163, 74, 0.08);
    --status-bg-purple: rgba(124, 58, 237, 0.08);
    --status-bg-red: rgba(220, 38, 38, 0.08);
    --status-bg-yellow: rgba(217, 119, 6, 0.08);

    /* Workflow Timeline */
    --workflow-completed: #16A34A;
    --workflow-active: #2563EB;
    --workflow-exportiert: #7C3AED;

    /* Legacy aliases */
    --status-bestaetigt: #16A34A;
    --status-bearbeitung: #D97706;
    --status-exportiert: #7C3AED;

    /* Grays - Refined slate palette */
    --gray-50: #F8FAFC;
    --gray-100: #F1F5F9;
    --gray-200: #E2E8F0;
    --gray-300: #CBD5E1;
    --gray-400: #94A3B8;
    --gray-500: #64748B;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1E293B;
    --gray-900: #0F172A;

    /* Shadows - Modern, subtle, layered */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 8px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 8px 16px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
    --shadow-xl: 0 16px 32px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06);

    /* 8px Grid System - Consistent spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Legacy spacing (keep for compatibility) */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border Radius - Consistent system */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* Typography Scale */
    --font-xs: 11px;
    --font-sm: 12px;
    --font-base: 14px;
    --font-md: 15px;
    --font-lg: 16px;
    --font-xl: 18px;
    --font-2xl: 20px;
    --font-3xl: 24px;
    --font-4xl: 28px;

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Brand Colors (zusätzlich für andere Module) */
    --brand-gradient-start: #667eea;
    --brand-gradient-end: #764ba2;
    --brand-green: #86BC25;
}