:root {
  /* Colores principales */
  --primary-color: #0B2C3D;  /* Color principal oscuro/azulado */
  --primary-light: #32bdde;  /* Versión más clara del primario */
  --primary-dark: #071E2A;   /* Versión más oscura del primario */
  --primary-overlay: #0b2c3d55;
  
  /* Color secundario/acento */
  --accent-color: #FF5A3C;   /* Color de acento vibrante */
  --accent-light: #FF7B63;   /* Versión más clara del acento */
  --accent-dark: #E04C30;    /* Versión más oscura del acento */
  
  /* Escala de grises */
  --white: #ffffff;
  --light-gray: #f5f7fa;
  --gray: #a0aec0;
  --gray-dark: #718096;
  --dark: #2d3748;
  
  /* Colores funcionales */
  --secondary-color: #f8f9fa;  /* Fondo claro */
  --text-color: #1a202c;
  --success: #38a169;
  --warning: #dd6b20;
  --error: #e53e3e;
  --error-dark: #b22323;
  
  /* Sombras */
  --shadow-xs: 0 1px 3px rgba(11, 44, 61, 0.05);
  --shadow-sm: 0 2px 4px rgba(11, 44, 61, 0.08);
  --shadow-md: 0 4px 6px rgba(11, 44, 61, 0.12);
  --shadow-lg: 0 10px 15px rgba(11, 44, 61, 0.1);
  
  /* Tipografía (se mantiene igual) */
  --font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

    --button-size: 3.75rem; /* 60px en rem */
  --badge-size: 1.5rem; /* 24px en rem */
}