/* ==========================================================================
   MC&H Networks — tokens de diseño
   Sistema aprobado. Los valores de color y familia tipográfica NO se redefinen
   ni se sobrescriben en main.css ni en ninguna página: se consumen desde aquí.
   ========================================================================== */

:root{
  /* --- Color: superficies ------------------------------------------------ */
  --ink:#0F1428;         /* fondo principal */
  --slate:#1B2340;       /* paneles/tarjetas */
  --slate-line:#2A3358;  /* bordes */

  /* --- Color: acentos ----------------------------------------------------
     `--cyan` conserva el nombre por continuidad con el código ya escrito,
     aunque el valor real es el teal del logo, no un cyan puro. No renombrar. */
  --amber:#E8A33D;       /* acento primario (CTA, destacados) */
  --cyan:#5CADA2;        /* acento reservado SOLO para contenido de IPv6 — teal del logo */
  --coral:#E8604A;       /* uso mínimo: urgencia/agotamiento de IPv4 */
  --brand-gray:#B3B2B2;  /* gris del "&" del logo — neutro de marca puntual, uso opcional */

  /* Paso atenuado de --cyan para gráficos de una sola serie con énfasis:
     la barra destacada va en --cyan y el resto (contexto) en --cyan-dim.
     No es un color nuevo de marca — es --cyan mezclado con --ink al 67%.
     El valor está verificado contra el fondo --ink: separación respecto a
     --cyan de ΔE 15.1 (deuteranopía) y 15.3 (visión normal), contraste
     3:1 con la superficie. No sustituir "a ojo" por otro teal. */
  --cyan-dim:#437A7B;

  /* Estado hover del botón primario, tal cual venía del prototipo aprobado.
     No es una mezcla derivable de --amber (no es el ámbar aclarado con
     blanco: los tres canales dan proporciones distintas), así que vive aquí
     como valor propio en vez de quedar suelto en main.css. */
  --amber-hover:#f4b455;

  /* --- Color: texto ------------------------------------------------------ */
  --mist:#EDEFF6;        /* texto principal */
  --mist-dim:#A7ADC4;    /* texto secundario */

  /* --- Tipografía --------------------------------------------------------
     Cada familia declara fallback de sistema: si Google Fonts no carga, el
     sitio conserva la distinción display/body/mono sin saltos de layout. */
  --display: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* --- Escala tipográfica ------------------------------------------------
     Valores tomados del prototipo aprobado (docs/index-prototipo.html).
     No ajustar "a ojo": cambiarlos aquí cambia todas las páginas. */
  --fs-hero:   clamp(2.2rem, 5.2vw, 4.4rem);   /* h1 */
  --fs-h2-lg:  clamp(1.8rem, 4vw, 2.8rem);     /* h2 de cierre/contacto */
  --fs-h2:     clamp(1.6rem, 3vw, 2.4rem);     /* h2 de sección */
  --fs-h3:     1.25rem;                        /* títulos de tarjeta */
  --fs-lead:   1.15rem;                        /* bajada de hero */
  --fs-body:   1rem;
  --fs-small:  0.875rem;
  --fs-label:  0.78rem;   /* etiquetas mono, kickers */
  --fs-micro:  0.72rem;   /* rail, footer, pills */

  --lh-tight: 1.08;       /* h1 */
  --lh-head:  1.35;       /* titulares de tarjeta */
  --lh-body:  1.6;
  --ls-label: 0.08em;     /* tracking de etiquetas mono */

  /* --- Espaciado (paso base 8px) ----------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --section-y: clamp(3.5rem, 2rem + 7vw, 7rem);  /* aire vertical entre secciones */

  /* --- Estructura --------------------------------------------------------
     Esquinas sutiles por decisión de diseño: nada por encima de 6px. */
  --radius-sm: 3px;
  --radius: 4px;
  --radius-lg: 6px;

  --border: 1px solid var(--slate-line);

  --maxw: 1180px;        /* ancho de contenedor */
  --maxw-prose: 68ch;    /* ancho de lectura para cuerpo de artículo */
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);

  /* --- Movimiento -------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 220ms;

  /* --- Foco de teclado ---------------------------------------------------- */
  --focus-ring: 2px solid var(--amber);
  --focus-offset: 3px;

  /* --- Capas -------------------------------------------------------------- */
  --z-nav: 100;
  --z-indicator: 50;
}

/* Sin animación para quien la desactiva a nivel de sistema. */
@media (prefers-reduced-motion: reduce){
  :root{
    --dur-fast: 0ms;
    --dur: 0ms;
  }
}