/* ============================================================
   TOKENS DE DISEÑO
   ------------------------------------------------------------
   Custom properties de la landing. Cualquier cambio de paleta,
   tipografía o espaciado se hace ACÁ, no en los componentes.
   Esto permite mantener coherencia visual sin cazar valores
   hardcodeados por todo el código.
   ============================================================ */

:root {
  /* ---------- Paleta · Modo Oscuro (default) ----------
     Optimizado para OLED: ahorra batería y reduce CO₂. */
  --color-bg:           #0D1B1E;   /* Verde Abismo · fondo principal */
  --color-surface:      #103035;   /* Verde Tierra · tarjetas/bloques */
  --color-text:         #F9F9F9;   /* Blanco Nube · texto principal */
  --color-text-muted:   #A8B3B0;   /* Gris Técnico · bordes, textos secundarios (~5.4:1 sobre bg) */
  --color-accent:       #2ECC71;   /* Verde Clorofila · CTAs, acentos (≤20%) */
  --color-shadow:       rgba(13, 27, 30, 0.4);
  --color-shadow-soft:  rgba(13, 27, 30, 0.18);
  --color-accent-glow:  rgba(46, 204, 113, 0.18);
  --color-accent-tint:  rgba(46, 204, 113, 0.06);

  /* ---------- Tipografía ----------
     SOLO fuentes nativas del sistema. Google Fonts y externas
     están ESTRICTAMENTE prohibidas por el brief del proyecto. */
  --font-sans:  system-ui, -apple-system, BlinkMacSystemFont,
                "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                Consolas, monospace;

  /* ---------- Espaciado y radios ----------
     Valores coherentes para todo el sitio. */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --space-xs:    0.4rem;
  --space-sm:    0.75rem;
  --space-md:    1.25rem;
  --space-lg:    1.75rem;
  --space-xl:    2.5rem;

  /* ---------- Iconos ----------
     Sistema unificado en 3 tamaños + 1 stroke consistente.
     Antes había 4 tamaños distintos (16, 18, 20, 36) sin token. */
  --icon-size-sm:  18px;  /* trust row, banner garantía */
  --icon-size-md:  20px;  /* hero props check, contenido inline */
  --icon-size-lg:  36px;  /* cards de servicio (con fondo tint) */
  --icon-stroke:   1.75;  /* coherente con los SVGs inline del sitio */

  /* ---------- Variantes Cyberpunk · Modal de Diagnóstico ----------
     Estética intencionalmente distinta al resto del sitio
     (modo técnico / operativo). Verde neón saturado, fondo
     casi negro, texto azulado. Mantener coherencia con la
     identidad 'modo consola' del formulario. Si en el futuro
     se decide alinear con el sistema principal, basta con
     apuntar estas variantes a los tokens base. */
  --color-accent-cyber:   #00FF66;  /* Verde Neón · CTAs y acentos del modal */
  --color-bg-cyber:       #0A0E17;  /* Negro Profundo · fondo del modal */
  --color-text-cyber:     #E1EBF5;  /* Blanco Azulado · texto principal del modal */
  --color-text-cyber-mut: #5A6E85;  /* Gris Azulado · textos secundarios del modal */
  --color-glow-cyber:     rgba(0, 255, 102, 0.18);  /* Glow neón del modal */
  --font-mono-cyber:      Consolas, Monaco, "Courier New", monospace;  /* Stack monoespaciado explícito */
}