/* Variables CSS globales para la paleta de colores */
:root {
  /* Colores principales */
  --color-primary-yellow: #EEB700;
  --color-primary-orange: #E28600;
  --color-primary-black: #000000;
  --color-primary-white: #FFFFFF;

  /* Tonalidades de amarillo */
  --color-yellow: #EEB700;
  --color-yellow-light: #F5D366;
  --color-yellow-dark: #C59700;

  /* Tonalidades de naranja */
  --color-orange: #E28600;
  --color-orange-light: #F0A840;
  --color-orange-dark: #B86D00;

  /* Colores de fondo */
  --color-background: #000000;
  --color-background-dark: #0A0A0A;
  --color-background-light: #1A1A1A;

  /* Colores de superficie */
  --color-surface: #1A1A1A;
  --color-surface-hover: #2A2A2A;

  /* Colores de texto */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #EEB700;
  --color-text-muted: rgba(255, 255, 255, 0.6);

  /* Colores de acento */
  --color-accent: #EEB700;
  --color-accent-secondary: #E28600;
}

/* Estilos base del cuerpo */
body {
  font-family: 'Instrument Sans', sans-serif;
  background-color: var(--color-background);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  color: var(--color-text-primary);
}

/* Personalización del scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-background);
}

::-webkit-scrollbar-thumb {
  background: var(--color-yellow);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-yellow-light);
}

/* Selección de texto */
::selection {
  background-color: var(--color-yellow);
  color: var(--color-background);
}

::-moz-selection {
  background-color: var(--color-yellow);
  color: var(--color-background);
}