/* ============================================================
   TEAM LASER — Sistema de diseño (tokens)
   Toda la paleta y tipografía del sitio se define UNA sola vez
   aquí. Si el cliente pide cambiar un color o una fuente en el
   futuro, este es el único archivo que hay que tocar.
   ============================================================ */

:root {
  /* ---- Superficies (fondo negro de marca, en 3 profundidades) ---- */
  --bg:          #0a0a0b;   /* fondo general del sitio */
  --bg-alt:      #131417;   /* franjas alternas entre secciones */
  --surface:     #1c1d21;   /* tarjetas / paneles */
  --surface-2:   #232428;   /* tarjetas sobre tarjetas / hover */

  /* ---- Texto ---- */
  --ink:         #f4f2ee;   /* texto principal (blanco cálido) */
  --ink-muted:   #aaabb0;   /* texto secundario */
  --ink-faint:   #6f7075;   /* texto terciario / metadatos */

  /* ---- Acento láser (marca) ---- */
  --ember:       #ff4500;   /* naranja-rojo: el "rayo láser" */
  --ember-rgb:   255, 69, 0;
  --spark:       #ffaa00;   /* ámbar: la "chispa" */
  --ember-deep:  #721a1a;   /* rojo profundo: botones primarios */
  --ember-deep-hover: #8a2020;

  /* ---- Bordes / líneas ---- */
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* ---- Tipografía ---- */
  --font-display: 'Space Age', 'Orbitron', sans-serif;
  --font-body: 'Open Sans', Helvetica, Arial, sans-serif;

  /* ---- Espaciado fluido (se adapta solo entre mobile y desktop) ---- */
  --space-xs:  clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
  --space-sm:  clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem);
  --space-md:  clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
  --space-lg:  clamp(2.5rem, 1.8rem + 2.4vw, 4.5rem);
  --space-xl:  clamp(4rem, 3rem + 3.5vw, 7rem);

  /* ---- Radios y sombras ---- */
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-ember: 0 0 24px rgba(var(--ember-rgb), 0.35);

  /* ---- Transiciones ---- */
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* ---- Overrides de Bootstrap para que herede la identidad de marca ---- */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--ink);
  --bs-body-font-family: var(--font-body);
  --bs-link-color: var(--ember);
  --bs-link-hover-color: var(--spark);
  --bs-link-color-rgb: var(--ember-rgb);
  --bs-border-color: var(--line);
  --bs-primary: var(--ember);
  --bs-primary-rgb: var(--ember-rgb);
  --bs-emphasis-color: var(--ink);
  --bs-modal-bg: var(--surface);
  --bs-modal-color: var(--ink);
  --bs-modal-header-border-color: var(--line);
  --bs-heading-color: var(--ink);
}