:root {
  /* Colores base */
  --primary-color: #0b2c3d;
  --accent-color: #ff5a3c;
  --secondary-color: #f8f9fa;
  /* Colores secundarios */
  --white: #ffffff;
  /* Colores grises */
  --gray: #a0aec0;
  /* Colores de estado */
  --success: #38a169;
  --success-dark: #153f2c;
  --warning: #dd6b20;
  --error: #e53e3e;
  /* Colores de sombra */
  --shadow-color: #d6d6d6;
  --text-color: #1a202c;

  /* colores relativos del primario */
  --primary-light: hsl(from var(--primary-color) h s calc(l + 20));
  --primary-dark: hsl(from var(--primary-color) h s calc(l - 40));
  --primary-overlay: hsl(from var(--primary-color) h s calc(l + 50) / 0.5);
  --primary-blur: hsl(from var(--primary-color) h s calc(l + 70) / 0.8);

  /* colores relativos del acento */
  --accent-light: hsl(from var(--accent-color) h s calc(l + 20));
  --accent-dark: hsl(from var(--accent-color) h calc(s + 20) calc(l - 20));

  /* Escala de grises */

  --light-gray: hsl(from var(--gray) h s calc(l + 20));
  --gray-dark: hsl(from var(--gray) h s calc(l - 20));
  --dark: hsl(from var(--gray-dark) h s calc(l - 20));

  /* Colores funcionales */

  --text-color-light: hsl(from var(--text-color) h s calc(l + 40));

  --error-dark: hsl(from var(--error) h s calc(l - 20));

  /* Sombras */

  --shadow-xs: 0 1px 3px var(--shadow-color);
  --shadow-sm: 0 2px 4px var(--shadow-color);
  --shadow-md: 0 4px 6px var(--shadow-color);
  --shadow-lg: 0 10px 15px var(--shadow-color);

  /* 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 */
}