/**
 * CSS Custom Properties - Design System Variablen
 * Version: 2.1.0 - TailAdmin Professional Integration
 *
 * Diese Datei definiert alle CSS Custom Properties für das konsistente
 * Design System der Anwendung inklusive Light/Dark Mode Unterstützung.
 * Basierend auf TailAdmin Template Farben und Metriken.
 */

/* ========================================
   ROOT VARIABLES - LIGHT MODE (Clean Corporate)
   ======================================== */

:root {
  /* ========================================
     FARBPALETTE - LIGHT MODE
     ======================================== */
  
  /* Brand Farben (TailAdmin Blue) */
  --color-brand-50: #eff4fb;
  --color-brand-100: #dbeafe;
  --color-brand-500: #3c50e0;      /* TailAdmin Primary Blue */
  --color-brand-600: #2563eb;
  
  /* Neutral Farben (TailAdmin Gray Scale) */
  --color-gray-50: #f9fafb;        /* Main Background */
  --color-gray-100: #f3f4f6;       /* Panel Background */
  --color-gray-200: #e5e7eb;       /* Borders */
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;       /* Body Text */
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;       /* Headings */
  
  /* Status Farben */
  --color-success: #10b981;        /* emerald-500 */
  --color-warning: #f59e0b;        /* amber-500 */
  --color-danger: #ef4444;         /* red-500 */
  --color-info: #3b82f6;           /* blue-500 */

  /* Semantic Mapping - Light Mode */
  --color-background: var(--color-gray-50);
  --color-surface: #ffffff;
  --color-border: var(--color-gray-200);
  --color-text-main: var(--color-gray-900);
  --color-text-body: var(--color-gray-500);
  --color-text-muted: var(--color-gray-400);
  
  --color-primary: var(--color-brand-500);
  --color-primary-hover: var(--color-brand-600);
  
  /* ========================================
     LAYOUT DIMENSIONEN
     ======================================== */
  
  /* Sidebar */
  --sidebar-width: 280px; /* TailAdmin standard width */
  --sidebar-width-collapsed: 64px;
  
  /* Header */
  --header-height: 80px;
  
  /* Grid System - Unchanged */
  --cell-width-base: 218px;
  --cell-height-base: 295px;
  --cell-width-half: 109px;
  --cell-height-half: 295px;
  --page-pair-width: clamp(100px, 8vw, 350px);
  --cell-width: var(--cell-width-base);
  --cell-height: var(--cell-height-base);
  --half-doc-height: calc(var(--cell-height-base) / 2);
  
  /* ========================================
     TYPOGRAFIE SYSTEM
     ======================================== */
  
  /* Font Families - TailAdmin "Outfit" Integration via Google Fonts in index.php */
  --font-family-primary: 'Outfit', sans-serif;
  --font-family-mono: "Courier New", Courier, monospace;
  
  /* Font Sizes - Fluid Typography (Existing logic preserved) */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.125vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  --font-size-base: clamp(1rem, 0.9rem + 0.375vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.625vw, 1.5rem);
  
  /* Heading Scale */
  --font-size-h1: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  --font-size-h2: clamp(1.5rem, 1.3rem + 0.75vw, 1.875rem);
  --font-size-h3: clamp(1.25rem, 1.1rem + 0.625vw, 1.5rem);
  --font-size-h4: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  
  /* ========================================
     BORDER RADIUS SYSTEM (TailAdmin Style)
     ======================================== */
  
  --radius-sm: 4px;
  --radius-base: 8px;   /* rounded-lg */
  --radius-lg: 12px;    /* rounded-xl */
  --radius-xl: 16px;    /* rounded-2xl */
  --radius-full: 9999px;
  
  /* ========================================
     SHADOW SYSTEM
     ======================================== */
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-card: 0px 8px 13px -3px rgba(0, 0, 0, 0.07); /* TailAdmin Card Shadow */
  
  /* ========================================
     Z-INDEX SYSTEM - KONSOLIDIERT (Single Source of Truth)
     ======================================== */
  
  /* Grid & Content Layers (0-50) */
  --z-index-base: 0;
  --z-index-cell: 5;
  --z-index-cell-number: 6;
  --z-index-document: 7;
  --z-index-grid-container: 8;
  --z-index-grid-drop-area: 9;
  --z-index-float: 10;

  /* Layout Layers (20-50) */
  --z-index-sticky: 20;
  --z-index-sidebar: 20;
  --z-index-header: 30;
  --z-index-dropdown: 40;

  /* Modal System (100-150) */
  --z-index-backdrop: 100;
  --z-index-modal-backdrop: 100;
  --z-index-temp-dialog: 105;
  --z-index-temp-dialog-content: 106;
  --z-index-modal: 110;
  --z-index-dialog: 110;
  --z-index-dialog-content: 111;
  --z-index-popover: 120;
  --z-index-popup: 115;
  --z-index-popup-content: 116;
  --z-index-popup-controls: 117;

  /* Notifications (130-150) */
  --z-index-notification: 130;
  --z-index-toast: 130;
  --z-index-tooltip: 140;

  /* Fullscreen (150+) */
  --z-index-fullscreen: 150;
  --z-index-login: 9999; /* Legacy-Kompatibilität */
  
  /* ========================================
     TRANSITION SYSTEM
     ======================================== */
  
  --transition-base: 200ms ease-in-out;
  
  /* ========================================
     SPECIALIZED COLORS - UNCHANGED FOR DARK MODE
     ======================================== */
  
  /* Nebula Theme Colors (Dark Mode Identity) */
  --nebula-bg-light: #1e293b;
  --nebula-bg-dark: #0f172a;
  --nebula-bg-darker: #0b1120;
  --nebula-border: #334155;
  --nebula-text: #e2e8f0;
  --nebula-text-muted: #94a3b8;
  --nebula-accent: #38bdf8;
  
  /* Legacy Vars for Compatibility */
  --color-border-light: var(--color-gray-200);
  --color-background-light: #ffffff;
}

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

/* Font Family Utility */
body {
  font-family: var(--font-family-primary);
}

.font-mono {
  font-family: var(--font-family-mono);
}

/* Heading H4 - Component Headers */
h4, .heading-4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
  @apply text-gray-700 dark:text-gray-200 tracking-tight;
}