/*--------------------------------------------------------------
# Paleta de marca — ÚNICA fuente de verdad de color de toda la web.
# Cambiar un valor acá repinta el sitio entero (index, campanato,
# ganadores, tickets y el fondo Chladni). No hardcodear colores en
# ninguna otra hoja: usar siempre var(--...).
--------------------------------------------------------------*/
:root {
  /* Base — estos nombres los lee chladni-bg.js vía getComputedStyle(:root).
     Son EXACTAMENTE los 5 colores definidos para el fondo Chladni. */
  --non-resonant-color: #c6c6c6;   /* gris apagado */
  --particle-color-1: #986dff;     /* púrpura */
  --particle-color-2: #ffb63e;     /* ámbar (color del logo) */
  --particle-color-3: #fd3cd9;     /* magenta */
  --background-color: #000000;     /* negro */

  /* Componentes RGB para usar con transparencia: rgba(var(--amber-rgb), .2) */
  --amber-rgb: 255, 182, 62;
  --purple-rgb: 152, 109, 255;
  --magenta-rgb: 253, 60, 217;
  --muted-rgb: 198, 198, 198;

  /* Alias semánticos que consume el sitio */
  --color-bg: var(--background-color);
  --color-text: #ffffff;                   /* blanco: texto principal */
  --color-muted: var(--non-resonant-color);/* gris: texto secundario / bordes */
  --color-accent: var(--particle-color-2); /* ámbar: acento principal */
  --color-accent-2: var(--particle-color-1); /* púrpura: acento secundario / hover */
  --color-accent-3: var(--particle-color-3); /* magenta: acento terciario */

  /* Fondo de la "cama" de contenido: una sola superficie negra detrás de todo
     el texto, con los costados difuminados hacia el fondo Chladni. Subí el alpha
     hacia 1 para negro más pleno; bajalo para dejar ver más partículas al centro. */
  --color-surface: rgba(0, 0, 0, 0.95);

  /* Gradiente de marca (títulos, subrayados, texto con relleno) */
  --gradient-primary: linear-gradient(135deg, var(--particle-color-1) 0%, var(--particle-color-2) 50%, var(--particle-color-3) 100%);

  /* Lineas de marca: bordes y divisores usan un solo criterio visual. */
  --brand-line-color: rgba(var(--amber-rgb), 1);
  --brand-line: 1px dotted var(--brand-line-color);
}