/* Variables CSS para colores y estilos personalizados */

:root {
  /* Fondo general de la página (Rosa / Melocotón Oficial del FIB) */
  --bg-general: #ffccd8;
  /* --bg-general: url('../img/festival/background.png'); */

  /* Color principal para textos (Azul Real Oficial del FIB - alta legibilidad) */
  --color-primary: #0361c1;

  /* Color de la cabecera (Rosa Oficial para que se funda con el fondo y el logo negro destaque al 100%) */
  --bg-header: #48dded;

  /* Color para títulos (Negro Puro para máxima visibilidad y contraste estilo Neo-brutalista) */
  --color-title: #000000;

  /* Color para bordes de botones (Negro Puro estilo Neo-brutalista) */
  --border-button: #000000;

  /* Color de fondo para botones (Verde Lima Vibrante Oficial del FIB) */
  --bg-button: #62f84d;

  /* Color de texto para botones (Negro Puro) */
  --text-button: #000000;

  /* Color para bordes de botones en hover (Azul Real Oficial) */
  --border-button-hover: #0361c1;

  /* Color de fondo para botones en hover (Azul Real Oficial) */
  --bg-button-hover: #0361c1;

  /* Color de texto para botones en hover (Blanco para contraste óptimo) */
  --text-button-hover: #ffffff;

  /* Fondo de las cajas de formulario de entradas (Blanco Puro para legibilidad impecable de los inputs) */
  --bg-forms-box: #ffffff;

  /* Fondo del footer (Rosa Oficial para unificar con el fondo general y permitir texto negro legible) */
  --bg-footer: #48dded;

  /* Fondo de popups (Blanco) */
  --bg-popup: #ffffff;

  /* Color de enlaces (Azul Real) */
  --link-color: #0361c1;

  /* Color de enlaces en hover (Negro) */
  --link-color-hover: #000000;

  /* Color de texto negro */
  --text-black: #000000;

  /* Color de texto blanco */
  --text-white: #ffffff;

  /* Grosor del borde (Estilo Neo-brutalista de la web oficial) */
  --border-width: 3px;

  /* Estilo del borde */
  --border-style: solid;

  /* Radio del borde (Esquinas totalmente cuadradas estilo Neo-brutalista oficial) */
  --border-radius: 0px;

  /* Color para etiquetas (heredado del color principal) */
  --label-color: var(--color-primary);

  /* Color para títulos (heredado del color de título) */
  --title-color: var(--color-title);

  /* Fondo del header (heredado del color de cabecera) */
  --header-bg: var(--bg-header);

  /* Fondo de cajas de ticket */
  --ticket-box-bg: var(--bg-button);

  /* Borde de cajas de ticket */
  --ticket-box-border: var(--border-button);

  /* Texto de cajas de ticket */
  --ticket-box-text: var(--text-button);

  /* Color de texto del menú (Negro sobre la cabecera rosa) */
  --text-menu-color: #000000;

  /* Color de texto del menú en hover (Azul Real) */
  --text-menu-color-hover: #0361c1;
}

/* Start Custom Fonts CSS*/
@font-face {
  font-family: 'festivalFont';
  font-style: normal;
  font-weight: bold;
  font-display: auto;
  src: url('../fonts/festival/ABCMonumentGrotesk-BlackItalic.woff2') format('woff2');
}

@font-face {
  font-family: 'festivalFont';
  font-style: normal;
  font-weight: normal;
  font-display: auto;
  src: url('../fonts/festival/ABCMonumentGrotesk-BlackItalic.woff2') format('woff2');
}
/* End Custom Fonts CSS */