/**
 * r3 Innovation Design Tokens
 * CSS Custom Properties für alle Design-Elemente
 * 
 * Verwendung:
 * @import 'design-tokens.css';
 * 
 * Oder direkt im HTML:
 * <link rel="stylesheet" href="design-tokens.css">
 */

:root {
  /* ============================================
     COLORS - Primary
     ============================================ */
  
  /* Primary Dark */
  --color-primary-dark: #232323;
  --color-primary-dark-rgb: 35, 35, 35;
  
  /* Primary Accent */
  --color-primary-accent: #E1FE52;
  --color-primary-accent-rgb: 225, 254, 82;
  
  /* Primary Accent (Dashboard - Lime Green) */
  --color-primary-accent-dashboard: #d4f44a;
  --color-primary-accent-dashboard-rgb: 212, 244, 74;
  
  /* ============================================
     COLORS - Secondary
     ============================================ */
  
  /* Secondary Accent */
  --color-secondary-accent: #E4E4FF;
  --color-secondary-accent-rgb: 228, 228, 255;
  
  /* ============================================
     COLORS - UI Accent (Buttons)
     ============================================ */
  
  /* Accent Yellow - Akzeptieren Button */
  --color-accent-yellow: #E1FE52;
  --color-accent-yellow-rgb: 225, 254, 82;
  --color-accent-yellow-hover: #d4f44a;
  
  /* Accent Pink - Senden Button */
  --color-accent-pink: #FF6B9D;
  --color-accent-pink-rgb: 255, 107, 157;
  --color-accent-pink-hover: #ff5588;
  
  /* ============================================
     COLORS - Neutral
     ============================================ */
  
  /* Backgrounds */
  --color-bg-light: #E7E3E3;
  --color-bg-light-rgb: 231, 227, 227;
  
  --color-bg-very-light: #F3F1EF;
  --color-bg-very-light-rgb: 243, 241, 239;
  
  --color-bg-white: #FFFFFF;
  --color-bg-white-rgb: 255, 255, 255;
  
  /* Dashboard Background */
  --color-bg-dashboard: #1a1f3a;
  --color-bg-dashboard-rgb: 26, 31, 58;
  --color-bg-dashboard-gradient-1: #2d1b4e;
  --color-bg-dashboard-gradient-2: #0f1629;
  
  /* Text on Dark (Dashboard) */
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-secondary: #a0a5b8;
  
  /* Text Colors */
  --color-text-primary: #1A1A1A;
  --color-text-primary-rgb: 26, 26, 26;
  
  --color-text-secondary: #4A4A4A;
  --color-text-secondary-rgb: 74, 74, 74;
  
  --color-text-tertiary: #6C6C6C;
  --color-text-tertiary-rgb: 108, 108, 108;
  
  --color-text-white: #FFFFFF;
  --color-text-white-rgb: 255, 255, 255;
  
  /* Borders */
  --color-border-light: #E7E3E3;
  --color-border-medium: #D1D1D1;
  --color-border-dark: #232323;
  
  /* ============================================
     COLORS - Semantic
     ============================================ */
  
  /* Success */
  --color-success: #10B981;
  --color-success-rgb: 16, 185, 129;
  --color-success-light: #D1FAE5;
  --color-success-dark: #059669;
  
  /* Error */
  --color-error: #EF4444;
  --color-error-rgb: 239, 68, 68;
  --color-error-light: #FEE2E2;
  --color-error-dark: #DC2626;
  
  /* Warning */
  --color-warning: #F59E0B;
  --color-warning-rgb: 245, 158, 11;
  --color-warning-light: #FEF3C7;
  --color-warning-dark: #D97706;
  
  /* Info */
  --color-info: #3B82F6;
  --color-info-rgb: 59, 130, 246;
  --color-info-light: #DBEAFE;
  --color-info-dark: #2563EB;
  
  /* ============================================
     TYPOGRAPHY - Font Families
     ============================================ */
  
  --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 
                          'Helvetica Neue', Arial, sans-serif;
  
  --font-family-monospace: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 
                           Consolas, 'Courier New', monospace;
  
  /* ============================================
     TYPOGRAPHY - Font Sizes
     ============================================ */
  
  --font-size-display: 3.5rem;      /* 56px */
  --font-size-h1: 2.5rem;           /* 40px */
  --font-size-h2: 2rem;             /* 32px */
  --font-size-h3: 1.5rem;           /* 24px */
  --font-size-h4: 1.25rem;          /* 20px */
  --font-size-body-large: 1.125rem; /* 18px */
  --font-size-body: 1rem;           /* 16px */
  --font-size-body-small: 0.875rem; /* 14px */
  --font-size-caption: 0.75rem;     /* 12px */
  
  /* ============================================
     TYPOGRAPHY - Font Weights
     ============================================ */
  
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* ============================================
     TYPOGRAPHY - Line Heights
     ============================================ */
  
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;
  
  /* ============================================
     SPACING
     ============================================ */
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;
  
  /* ============================================
     BORDER RADIUS
     ============================================ */
  
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;
  
  /* ============================================
     SHADOWS
     ============================================ */
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.16);
  
  /* ============================================
     TRANSITIONS
     ============================================ */
  
  --transition-fast: 0.15s ease;
  --transition-standard: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ============================================
     Z-INDEX
     ============================================ */
  
  --z-index-base: 0;
  --z-index-dropdown: 1000;
  --z-index-sticky: 1100;
  --z-index-fixed: 1200;
  --z-index-modal-backdrop: 1300;
  --z-index-modal: 1400;
  --z-index-popover: 1500;
  --z-index-tooltip: 1600;
  
  /* ============================================
     BREAKPOINTS
     ============================================ */
  
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  
  /* ============================================
     CONTAINER WIDTHS
     ============================================ */
  
  --container-mobile: 100%;
  --container-tablet: 768px;
  --container-desktop: 1200px;
  --container-large: 1440px;
  
  /* ============================================
     COMPONENT SPECIFIC TOKENS
     ============================================ */
  
  /* Buttons */
  --button-padding-sm: 8px 16px;
  --button-padding-md: 12px 24px;
  --button-padding-lg: 16px 32px;
  --button-radius: var(--radius-md);
  --button-font-weight: var(--font-weight-medium);
  
  /* Cards */
  --card-padding: var(--spacing-lg);
  --card-radius: var(--radius-xl);
  --card-shadow: var(--shadow-md);
  --card-shadow-hover: var(--shadow-lg);
  
  /* Forms */
  --input-padding: 12px 16px;
  --input-radius: var(--radius-md);
  --input-border: 1px solid var(--color-border-light);
  --input-focus-border: var(--color-primary-dark);
  --input-focus-outline: 2px solid rgba(228, 228, 255, 0.2);
  
  /* Navigation */
  --nav-height: 64px;
  --nav-padding: 0 var(--spacing-lg);
  --sidebar-width: 256px;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Color Utilities */
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-white { color: var(--color-text-white); }

.bg-white { background-color: var(--color-bg-white); }
.bg-light { background-color: var(--color-bg-light); }
.bg-very-light { background-color: var(--color-bg-very-light); }

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

.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); }

.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); }

/* Typography Utilities */
.font-display { font-size: var(--font-size-display); }
.font-h1 { font-size: var(--font-size-h1); }
.font-h2 { font-size: var(--font-size-h2); }
.font-h3 { font-size: var(--font-size-h3); }
.font-h4 { font-size: var(--font-size-h4); }
.font-body { font-size: var(--font-size-body); }
.font-small { font-size: var(--font-size-body-small); }

.font-light { font-weight: var(--font-weight-light); }
.font-regular { font-weight: var(--font-weight-regular); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Border Radius Utilities */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow Utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }