/* Variables CSS - Design System Tokens */

:root {
  /* Colores Principales */
  --primary: #3B82F6;
  --background: #F8F9FA;
  --surface: #FFFFFF;
  --on-surface: #1F2937;
  --secondary-text: #6B7280;
  
  /* Colores Semánticos */
  --accent-green: #10B981;
  --accent-yellow: #FFC107;
  --accent-purple: #8B5CF6;
  --error: #EF4444;
  
  /* Colores de Estado para Componentes */
  --state-complete-bg: #D1FAE5;
  --state-complete-text: #065F46;
  --state-pending-bg: #FEF3C7;
  --state-pending-text: #92400E;
  --state-error-bg: #FEE2E2;
  --state-error-text: #991B1B;
  --state-info-bg: #DBEAFE;
  --state-info-text: #1E3A8A;
  
  /* Sistema de Espaciado */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  
  /* Transiciones */
  --transition-fast: 0.2s ease;
  --transition-slow: 0.3s ease;
  
  /* Bordes */
  --border-color: #E5E7EB;
  --border-color-medium: #D1D5DB;
}

/* Tema Oscuro */
[data-theme="dark"] {
  --primary: #3B82F6;
  --background: #121212;
  --surface: #1E1E1E;
  --on-surface: #E5E7EB;
  --secondary-text: #9CA3AF;
  --border-color: #374151;
  --border-color-medium: #4B5563;
}