/* ==========================================================================
   OMNITEK — variables.css
   Tokens de diseño: colores, tipografía, espaciados, radios, transiciones.
   Este archivo se importa PRIMERO en todas las páginas.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/*
  Nota sobre tipografía:
  - "Michroma" se usa como reemplazo temporal de Microgramma (fuente de marca)
    hasta confirmar la licencia de uso web de Microgramma.
  - Si se confirma la licencia, agregar aquí el @font-face de Microgramma
    y cambiar --font-display por 'Microgramma'. Ningún otro archivo necesita
    modificarse.
*/

:root{

  /* ---- Color: base ---- */
  --color-bg:        #111315; /* grafito casi negro, fondo principal */
  --color-bg-alt:    #16191C; /* fondo alterno, ligeramente más claro */
  --color-panel:     #1B1F23; /* tarjetas, paneles, hover */
  --color-line:      #2A2E33; /* bordes, separadores */

  /* ---- Color: marca ---- */
  --color-red:        #B01717; /* rojo institucional */
  --color-red-bright:  #D42323; /* rojo de acento / CTA / hover */
  --color-blue:        #3FA9F5; /* azul eléctrico — "datos en vivo" */

  /* ---- Color: texto ---- */
  --color-text:        #F2F2F0; /* texto principal sobre fondo oscuro */
  --color-text-muted:  #8A8F98; /* texto secundario / descripciones */
  --color-text-dim:    #5B6068; /* texto terciario / notas pequeñas */

  /* ---- Tipografía ---- */
  --font-display: 'Michroma', 'Arial Narrow', sans-serif;   /* títulos, marca */
  --font-body:    'Inter', -apple-system, 'Segoe UI', sans-serif; /* cuerpo */
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;    /* datos técnicos */

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;

  /* ---- Espaciado (escala de 4px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Layout ---- */
  --max-width: 1280px;
  --nav-height: 72px;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* ---- Transiciones ---- */
  --transition-fast:   0.2s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.6s ease;

  /* ---- Sombras / glow ---- */
  --glow-red:  0 0 10px rgba(212, 35, 35, 0.5);
  --glow-blue: 0 0 8px rgba(63, 169, 245, 0.6);
}