/* ============================================
   AUTHEN7IC Finance - Modern Design System
   ============================================ */

:root {
    /* === NEUER FARBVERLAUF === */
    --gradient-start: #2c4ecb;
    --gradient-step-1: #2859d0;
    --gradient-step-2: #2563d4;
    --gradient-step-3: #216ed9;
    --gradient-step-4: #1d79dd;
    --gradient-step-5: #1983e2;
    --gradient-step-6: #168ee6;
    --gradient-step-7: #1298eb;
    --gradient-step-8: #0ea3ef;
    --gradient-step-9: #0aaef4;
    --gradient-end: #03c3fd;
    
    /* Primärer Gradient (von links nach rechts: dunkel → hell) */
    --gradient-primary: linear-gradient(90deg, 
        var(--gradient-start) 0%, 
        var(--gradient-step-3) 25%,
        var(--gradient-step-5) 50%,
        var(--gradient-step-7) 75%,
        var(--gradient-end) 100%);
    
    /* Sanfter Gradient für große Flächen (von links nach rechts: dunkel → hell) */
    --gradient-soft: linear-gradient(90deg,
        var(--gradient-start) 0%,
        var(--gradient-step-2) 10%,
        var(--gradient-step-3) 20%,
        var(--gradient-step-4) 30%,
        var(--gradient-step-5) 40%,
        var(--gradient-step-6) 50%,
        var(--gradient-step-7) 60%,
        var(--gradient-step-8) 70%,
        var(--gradient-step-9) 80%,
        var(--gradient-end) 100%);
    
    /* === 8PX-GRID SPACING SYSTEM === */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 40px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 80px;
    
    /* === BORDER RADIUS === */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    
    /* === TYPOGRAPHY === */
    --font-family: 'Century Gothic', 'CenturyGothic', 'AppleGothic', Arial, sans-serif;
    --font-size-xs: 14px;
    --font-size-sm: 16px;
    --font-size-base: 18px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 40px;
    --font-size-4xl: 48px;
    
    /* === CONTAINER WIDTHS (für TV-Displays) === */
    --container-sm: 800px;
    --container-md: 1000px;
    --container-lg: 1200px;
    --container-xl: 1400px;
    --container-2xl: 1600px;
    
    /* === COLORS === */
    --color-white: #ffffff;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    
    /* === SHADOWS === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* === TRANSITIONS === */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
}

/* === GLOBAL RESET === */
* {
    font-family: var(--font-family) !important;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-gray-800);
}

/* === CONTAINER === */
.container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.container-wide {
    max-width: var(--container-2xl);
}

/* === SPACING UTILITIES === */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }
.mt-2xl { margin-top: var(--spacing-2xl); }
.mt-3xl { margin-top: var(--spacing-3xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.mb-2xl { margin-bottom: var(--spacing-2xl); }
.mb-3xl { margin-bottom: var(--spacing-3xl); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }