/* ============================================================================
 *  VARIABLES.CSS — Sistema de diseño (tokens)
 *  Para re-tematizar la landing a otro producto, cambia SOLO los colores de
 *  acento y las dos fuentes. Todo lo demás se adapta solo.
 *  NOTA: las fuentes se cargan con <link> en el HTML, NO con @import.
 *  El @import serializa la descarga y bloquea el renderizado.
 * ========================================================================== */

:root {
  /* --- Fondos --- */
  --bg-dark: #0A0A0A;
  --bg-card: #141416;

  /* --- Texto --- */
  --text-main: #FFFFFF;
  --text-muted: #A0A0A6;

  /* --- Acento de marca: NARANJA ---------------------------------------
     Naranja sobre el fondo azul del circuito: son colores opuestos, así que
     el botón salta a la vista sin tener que gritar. Además es el mismo
     naranja del puerto USB de la foto del producto.

     PARA RE-TEMATIZAR cambia estos 5 valores y ya: el resto del CSS
     (brillos, bordes, sombras y el degradado del botón) sale de aquí.
     --accent-rgb son los MISMOS canales de --accent en formato "R, G, B",
     sin paréntesis. Hace falta suelto porque rgba() necesita los números
     por separado para poder variarles la transparencia. */
  --accent: #FF7A1A;          /* color base */
  --accent-rgb: 255, 122, 26; /* el mismo, en canales sueltos */
  --accent-light: #FFA24D;    /* versión luminosa (textos sobre oscuro) */
  --accent-bright: #FF9A3D;   /* brillo del degradado del botón */
  --accent-deep: #C24E00;     /* sombra del degradado del botón */
  --accent-glow: rgba(var(--accent-rgb), 0.4);

  --danger: #FF6B75;

  /* --- Bordes --- */
  --border-color: rgba(var(--accent-rgb), 0.25);
  --border-subtle: rgba(255, 255, 255, 0.12);

  /* --- Tipografía --- */
  /* Sustitutos condensados, lo más parecidos posible a Bebas Neue por si la
     fuente web no llega a cargar (conexión lenta o Google Fonts bloqueado). */
  --font-display: 'Bebas Neue', 'Arial Narrow', 'Haettenschweiler', Impact, sans-serif;
  --font-body: 'Outfit', 'Segoe UI', system-ui, sans-serif;

  /* --- Sombras --- */
  --shadow-modal: 0 25px 60px rgba(0, 0, 0, 0.85);

  /* --- Radios --- */
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* --- Movimiento --- */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Objetivo táctil mínimo accesible --- */
  --tap-min: 44px;
}