/* IDMA Security - tokens de diseno. Todo color, tipografia y espaciado nace aqui. */
:root {
  /* Color: base compartida con NEXAKON */
  --idma-noche: #0A1420;          /* fondo principal, nunca negro puro */
  --idma-naranja: #EF8C22;        /* solo el instante de respuesta: CTA, punto de la linea, estado activo */

  /* Color: propios de IDMA */
  --idma-acero: #16273A;          /* superficies: tarjetas, bloques */
  --idma-guardia: #2F6DA3;        /* primario IDMA: rellenos con texto blanco, y sobre fondo claro */
  --idma-guardia-claro: #6FA6D6;  /* AJUSTE: guardia no cumple AA como texto sobre oscuro; usar este */
  --idma-niebla: #E6EBF0;         /* fondos claros, texto sobre oscuro */
  --idma-blanco: #FFFFFF;
  --idma-alerta: #C93D2D;         /* AJUSTE: antes #D94B3A. Relleno con texto blanco (5.0:1) */
  --idma-alerta-claro: #EF6F5E;   /* AJUSTE: texto o icono de alerta sobre oscuro */

  /* Secciones claras (misma familia que NEXAKON) */
  --idma-papel: #F5F7F8;
  --idma-naranja-texto: #A85606;  /* naranja como texto sobre claro: 5.2:1 (el naranja base da 2.5:1) */
  --idma-texto-claro: #3B4A5A;    /* texto secundario sobre claro */
  --idma-filete: #DDE3E8;

  /* Roles semanticos */
  --bg: var(--idma-noche);
  --surface: var(--idma-acero);
  --text: var(--idma-blanco);
  --text-soft: var(--idma-niebla);
  --link: var(--idma-guardia-claro);
  --cta-bg: var(--idma-naranja);
  --cta-text: var(--idma-noche);  /* blanco sobre naranja solo da 2.5:1: el CTA lleva texto oscuro */
  --line: rgba(230, 235, 240, 0.16);

  /* Tipografia */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --fs-3xl: clamp(2.5rem, 1.5rem + 4vw, 4.75rem);

  /* Espaciado (escala de 4 px) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 7rem;

  /* Forma y movimiento */
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 16px;
  --container: 1180px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-signal: 4.2s;
}