/* FAVINCA · tokens de diseño v1.0 (08-10-2026)
   Fuente única de color, tipografía, espacio y movimiento. La guía viva (/guia/) y el sitio leen de aquí.
   Marca: azul #304580 y gris #A19D9C del isotipo (piezas que encajan = un solo responsable).
   Señales por línea: energía = ámbar, red = cian, seguridad = azul claro. Solo como señal, nunca como texto largo. */

@import url('../fonts/fonts.css');

:root {
  /* ── Azul Favinca (marca) ── */
  --azul-950: #0b1428;   /* noche: fondo de hero y secciones oscuras */
  --azul-900: #0f1a33;   /* tinta: texto principal sobre papel */
  --azul-800: #17264b;
  --azul-700: #213464;
  --azul-600: #304580;   /* MARCA · botones primarios, enlaces */
  --azul-500: #4a62a6;
  --azul-300: #9fb0dc;   /* enlaces y texto secundario sobre noche */
  --azul-100: #e4e9f5;
  --azul-50:  #f1f4fa;

  /* ── Gris Favinca (marca, cálido) ── */
  --gris-900: #1f1d1c;
  --gris-700: #4a4644;   /* texto secundario sobre papel (AA) */
  --gris-600: #5f5a58;   /* texto terciario: fichas, fuentes (AA) */
  --gris-400: #a19d9c;   /* MARCA · líneas, isotipo; no para texto sobre papel */
  --gris-300: #c9c5c2;
  --gris-200: #dedad6;   /* bordes finos */
  --gris-100: #ecebe7;
  --papel:    #f6f5f2;   /* fondo general */
  --blanco:   #ffffff;

  /* ── Señales por línea ── */
  --energia:       #e8a33d;  /* luz, respaldo activo */
  --energia-tinta: #8a5a0b;  /* texto ámbar sobre papel (AA) */
  --red:           #36b3c6;  /* enlaces, datos en movimiento */
  --red-tinta:     #0d6b7a;
  --seguridad:     #7d95da;  /* cámaras, acceso, monitoreo (sobre noche) */
  --seguridad-tinta: #304580;

  /* ── Estados ── */
  --ok:       #256b42;   /* verificada, después */
  --ok-fondo: #e4f2ea;
  --aviso:    #8a5a0b;   /* en validación */
  --aviso-fondo: #fbf0dc;
  --antes:    #9a3b2e;   /* rótulo «antes» en comparadores */
  --antes-fondo: #f6e4e0;
  --whatsapp: #25d366;
  --encendido: #1f8a4c;  /* estados de simulador: verde = encendido / operando */
  --apagado:   #c0392b;  /* rojo = apagado / sin servicio / en espera */

  /* ── Roles (tema claro por defecto) ── */
  --fondo:        var(--papel);
  --superficie:   var(--blanco);
  --texto:        var(--azul-900);
  --texto-2:      var(--gris-700);
  --texto-3:      var(--gris-600);
  --borde:        var(--gris-200);
  --borde-fuerte: var(--gris-300);
  --enlace:       var(--azul-600);
  --foco:         #e8a33d;

  /* ── Tipografía ── */
  --f-titulo: 'Archivo', system-ui, sans-serif;  /* con font-stretch 112%: industrial, semiexpandida */
  --f-texto:  'Archivo', system-ui, sans-serif;
  --f-dato:   'IBM Plex Mono', ui-monospace, monospace;  /* fichas, referencias, fuentes, cifras pequeñas */
  --ancho-titulo: 112%;

  --t-xs:   0.75rem;                                   /* 12 · fichas, rótulos */
  --t-sm:   0.875rem;                                  /* 14 · notas, fuentes */
  --t-base: 1.0625rem;                                 /* 17 · cuerpo */
  --t-lg:   1.25rem;                                   /* 20 · entradillas */
  --t-xl:   clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem); /* 22-26 · H4 */
  --t-2xl:  clamp(1.75rem, 1.4rem + 1.3vw, 2.25rem);   /* 28-36 · H3 */
  --t-3xl:  clamp(2.125rem, 1.5rem + 2.4vw, 3.25rem);  /* 34-52 · H2 */
  --t-4xl:  clamp(2.625rem, 1.6rem + 4.2vw, 4.75rem);  /* 42-76 · H1 */
  --t-cifra: clamp(2.75rem, 2rem + 3vw, 4.5rem);       /* cifras destacadas */

  --lh-titulo: 1.05;
  --lh-texto: 1.6;
  --track-titulo: -0.015em;
  --track-rotulo: 0.12em;

  /* ── Espacio (base 4 px) ── */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px;
  --seccion: clamp(64px, 5vw + 40px, 128px);  /* aire vertical entre secciones */

  /* ── Retícula ── */
  --ancho-max: 1280px;
  --ancho-texto: 68ch;
  --margen: clamp(20px, 5vw, 64px);
  --canal: clamp(16px, 2vw, 32px);
  /* breakpoints (referencia; en CSS se escriben literales): 480 · 768 · 1024 · 1280 · 1536 */

  /* ── Forma ── */
  --radio-s: 2px;   /* fichas, etiquetas */
  --radio-m: 4px;   /* botones, campos, tarjetas */
  --radio-l: 8px;   /* paneles */
  --linea: 1px solid var(--borde);
  --sombra-1: 0 1px 2px rgba(15, 26, 51, 0.06), 0 2px 8px rgba(15, 26, 51, 0.05);
  --sombra-2: 0 8px 32px rgba(15, 26, 51, 0.14);

  /* ── Movimiento ── */
  --m-rapido: 120ms;  /* hover, foco */
  --m-base: 200ms;    /* abrir, cambiar estado */
  --m-lento: 360ms;   /* paneles, revelados */
  --m-escena: 640ms;  /* simuladores: apagar/encender */
  --m-barrido: 1100ms;  /* v2 · el corte de luz cruza la escena */
  --m-ensamble: 1200ms; /* v2 · piezas del isotipo que encajan (= firma A de logo.css) */
  --m-vista: 240ms;     /* v2 · transición entre páginas */
  --ease-salida: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-entrada: cubic-bezier(0.4, 0, 1, 1);
  --marquesina: 70s;  /* una vuelta completa */
}

/* Regla 70-20-10 (pedido de Gustavo, 09-10-2026): en cada página, sección y componente,
   70 % color dominante (la superficie: papel/blanco, o noche en secciones oscuras),
   20 % secundario (azul Favinca, tinta y textos; sobre noche: textos claros, azul 300 y bordes),
   10 % acento (ámbar del llamado principal y cifras clave, señales de línea, estados verde/rojo).
   Fotos y escenas son contenido y no cuentan; sus marcos y etiquetas sí. Medición: _gen/medir_70_20_10.py */

/* Tema noche: hero y secciones oscuras. Se aplica con data-tema="noche" en el contenedor. */
[data-tema="noche"] {
  --fondo:        var(--azul-950);
  --superficie:   var(--azul-900);
  --texto:        #f2f4f8;
  --texto-2:      #c3cbe0;
  --texto-3:      #95a0bd;
  --borde:        rgba(159, 176, 220, 0.18);
  --borde-fuerte: rgba(159, 176, 220, 0.32);
  --enlace:       var(--azul-300);
  --encendido:    #46d483;
  --apagado:      #ef5b4c;
  color: var(--texto);
  background: var(--fondo);
}

@media (prefers-reduced-motion: reduce) {
  :root { --m-rapido: 0ms; --m-base: 0ms; --m-lento: 0ms; --m-escena: 0ms; --m-barrido: 0ms; --m-ensamble: 0ms; --m-vista: 0ms; }
}