:root {
  /*------------------PALETA DE COLORES-------------------*/

  /* Colores base */
  --color-dark-gray: #333;
  --color-medium-gray: #666;
  --color-light-gray: #888;
  --color-white: #fff;
  --color-black: #000;
  --color-red: #FF0000;
  --color-red-hover: #ff4545;
  --color-blue: #328eff;
  --color-blue-hover: #59a4ff;
  --color-blue-rgb: 50, 142, 255;
  --color-green: #00FF00;
  --color-yellow: #FFFF00;
  --color-purple: #800080;
  --color-orange: #FFA500;
  --color-orange-hover: #ffbd42;
  --color-pink: #FFC0CB;
  --color-brown: #8e4e1a;
  
  /* Colores semánticos */
  --color-success: #4caf50;
  --color-error: #f44336;
  --color-warning: #ffc107;
  --color-info: #2196f3;

  /* Colores semánticos claros para fondos */
  --color-success-light: #e8f5e8;
  --color-error-light: #ffebee;
  --color-warning-light: #fff8e1;
  --color-info-light: #e3f2fd;

  /*------------------TIPOGRAFÍA-------------------*/
  
  /* Familias tipográficas */
  --font-family-header: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-family-body: 'Roboto', 'Segoe UI', system-ui, sans-serif;
}