/* ============================================
   GONHER - Variables CSS Compartidas
   Centraliza variables comunes usadas en todas las paginas
   Las paginas individuales solo deben redefinir colores de tema
   ============================================ */

:root {
  /* Espaciado comun */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 30px;

  /* Menu lateral */
  --menu-width: 85px;
  --menu-expanded-width: 280px;

  /* Colores de estado comunes */
  --success-color: #4CAF50;
  --warning-color: #FFC107;
  --error-color: #ff4444;
  --info-color: #2196F3;
  --pending-color: #ff9800;
  --paid-color: #4CAF50;

  /* Colores de interfaz comunes */
  --accent-color: #1A73E8;
  --secondary-color: #4A5568;

  /* Formularios comunes */
  --input-bg: #F0F2F5;
  --input-border: #D1D5DB;
  --input-focus: #1A73E8;

  /* Botones comunes */
  --button-gradient: linear-gradient(45deg, #1A73E8, #2196F3);
  --button-hover: linear-gradient(45deg, #2196F3, #42A5F5);

  /* Sistema tipografico */
  --font-family: 'Poppins', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;

  /* Sistema de sombras */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.25);

  /* Sistema de bordes */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
}