/* =====================================================================
   TEMA  --  UNICO lugar para colores, tipografias y logo.
   Estetica @camaleonhalloween: negro, rojo sangre, blanco y un acento verde (el ojo).
   Para cambiar el look se edita SOLO este archivo (y las imagenes de /img).
   Contrastes verificados (WCAG AA) sobre --color-bg / --color-bg-elevated:
     texto #F5F5F5 ~18:1 | muted #A8A8B3 ~8:1 | rojo-texto #F2555B ~5.5:1
     blanco sobre boton rojo #C1121F ~6.2:1 | verde #7FD321 ~12:1
   El rojo #C1121F NO se usa como color de texto pequeno (3.2:1): solo fondos y titulos grandes.
   ===================================================================== */

/* Tipografias propias (self-hosted, subset latin, font-display: swap). Licencias OFL en /fonts. */
@font-face { font-family: 'Anton'; src: url('/fonts/anton-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/inter-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* --- Colores --- */
  --color-bg: #0b0b0d;             /* fondo de pagina */
  --color-bg-elevated: #141417;    /* tarjetas / paneles */
  --color-bg-input: #0b0b0d;       /* campos de texto */
  --color-border: #2c2c33;         /* separadores */
  --color-border-strong: #6b6b78;  /* bordes de campos y botones secundarios (>=3:1) */
  --color-text: #f5f5f5;
  --color-text-muted: #a8a8b3;
  --color-accent: #c1121f;         /* rojo sangre: botones primarios, barras */
  --color-accent-hover: #e5383b;   /* rojo brillante: hover, brillos */
  --color-accent-text: #ffffff;    /* texto sobre accent */
  --color-accent-soft: #2a0b0f;    /* fondos suaves de rojo (chips, pistas de barras) */
  --color-red-text: #f2555b;       /* rojo legible para texto chico sobre fondo oscuro */
  --color-green: #7fd321;          /* acento verde del ojo: usar poco */
  --color-green-text-on: #0b0b0d;  /* texto sobre verde */
  --color-success: #7fd321;
  --color-warning: #f2555b;
  --color-danger: #c1121f;
  --color-danger-text: #ffffff;
  --color-notice-bg: rgba(193, 18, 31, 0.16);
  --color-notice-border: #e5383b;
  --color-overlay: rgba(0, 0, 0, 0.72);
  --glow-color: rgba(193, 18, 31, 0.42);  /* brillo rojo difuso del fondo */

  /* --- Tipografias --- */
  --font-display: 'Anton', 'Oswald', 'Arial Narrow', Impact, sans-serif;     /* titulos, botones, mayusculas condensadas */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Consolas, monospace;
  --font-weight-display: 400;      /* Anton ya es pesada */
  --display-transform: uppercase;
  --display-tracking: 0.03em;

  /* --- Logo (ojo de reptil, circular, baja resolucion: no agrandar mas de 160px) --- */
  --logo-url: image-set(url('/img/logo-160.webp') 1x, url('/img/logo-320.webp') 2x);
  --logo-size: 128px;
  --logo-size-small: 44px;
  --wordmark-width: 300px;        /* wordmark CAMALEON (imagen en el encabezado, /img/wordmark-*.webp) */

  /* --- Formas --- */
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}