:root {
  /* Colores base actuales (mantener) */
  --primary-color: #d32f2f;
  --accent-color: #424242;
  --secondary-color: #f8f9fa;
  --white: #ffffff;
  --gray: #a1a1aa;
  --success: #38a169;
  --warning: #dd6b20;
  --error: #e53e3e;
  --shadow-color: #d6d6d6;
  --text-color: #424242;
  --midnight: #171717;

  /* Nuevos colores para el diseño mejorado */
  --checkout-primary: #ff5a3a; /* Negro oscuro para checkout */
  --checkout-accent: #8b5cf6; /* Púrpura vibrante */
  --checkout-accent-light: hsl(from var(--checkout-accent) h s calc(l + 30));
  --checkout-accent-medium: hsl(from var(--checkout-accent) h s calc(l + 25));

  --checkout-success: #00bb2d; /* Verde moderno */
  --background-dark: #0f0f0f; /* Fondo oscuro */
  --foreground-light: #fafafa; /* Texto claro */
  --border-light: #e5e5e5; /* Bordes claros */
  --muted-background: #f5f5f5; /* Fondo suave */
  --card-background: #ffffff; /* Fondo de tarjetas */

  /* Colores de gráficos/charts */
  --chart-1: #f97316; /* Naranja */
  --chart-2: #06b6d4; /* Cyan */
  --chart-3: #3b82f6; /* Azul */
  --chart-4: #84cc16; /* Verde lima */
  --chart-5: #eab308; /* Amarillo */

  /* 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-blur: hsl(from var(--gray) h s calc(l + 70) / 0.8);
  --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 20px 25px -5px 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 */
  --small-font-size: 0.75rem;

  --size-desktop-filters: 50px;
  --size-mobile-filters: 45px;
}

/* * {
    border: 1px solid red;
  } */