/* ===========================================================================
   Tokens de marca — Corporacion Cartografica
   ---------------------------------------------------------------------------
   EL UNICO SITIO DEL WORKSPACE CON UN HEX DE MARCA.

   Ninguna pieza declara su propio :root. Toda infografia, carrusel, informe o
   dashboard enlaza este archivo por ruta relativa. Copiar un hex a mano es
   como la marca se desalinea sin que nadie lo haya decidido.

   Procedencia: Linea grafica v4 (linea-grafica.md), aprobada el 04-oct-2026.
   Los valores vienen de la v1 (22-sep-2026). Los colores se midieron sobre
   el arte que ella mando, no se aproximaron. Las reglas de uso estan en
   linea-grafica.md; el porque de cada cambio, en decisiones.md.
   =========================================================================== */

:root {
  /* --- Paleta oficial (manual, p. 7) ----------------------------------- */
  --blanco:     #FFFFFF;  /* la casa del logo. Intocable */
  --hueso:      #F6F4EF;  /* pie de pieza, cierre de video, pantalla de cierre */
  --azul:       #07213E;  /* Azul Cartografica: pastilla del mensaje y titulares */
  --azul-2:     #103365;  /* azul del logo: segundo nivel dentro del azul */
  --azul-3:     #3A5E93;  /* azul de apoyo: lineas y detalles secundarios. NUNCA texto */
  --oro:        #DAA238;  /* Oro Cartografica: solo el boton y el dato que importa */
  --oro-texto:  #8E6E2A;  /* el unico oro que puede ser letra sobre fondo claro */
  --oro-logo:   #E4C465;  /* oro de la brujula del isotipo. Referencia, no se usa suelto */

  /* Alias con los nombres que ya usan el dashboard y el motor de artes. Apuntan
     a la paleta oficial: no son colores aparte. */
  --navy:      var(--azul);
  --navy-2:    var(--azul-2);
  --sky:       var(--azul-3);
  --gold:      var(--oro);

  /* El oro sobre azul contrasta 7,1:1; sobre blanco cae a 2,3:1 y no se lee.
     Como letra sobre claro, siempre --oro-texto. */

  /* --- Neutros (no son marca: son infraestructura) --------------------- */
  --silver:    #a9adb8;  /* bordes punteados, estados vacios */
  --ink:       #16213a;  /* texto principal en documentos */
  --ink-2:     #46526a;  /* texto secundario */
  --muted:     #7a8394;  /* texto terciario, pies de tabla, notas al margen */
  --line:      #dce3ee;  /* bordes y separadores */
  --soft:      #f2f5fa;  /* fondo de bloque */
  --gold-soft: #fcf6e4;  /* fondo de aviso */

  /* --- Semaforo -------------------------------------------------------- */
  /* Estos NO son colores de marca: son significado. Verde va bien, rojo va
     mal. No los uses como decoracion, o el dashboard deja de leerse de un
     vistazo. */
  --good:      #1f7a4a;
  --good-soft: #e6f3ec;
  --bad:       #a3322a;
  --bad-soft:  #fbeaea;

  /* --- Tipografia (manual, p. 8) --------------------------------------- */
  /* Dos familias, las dos de Google Fonts. Se usan INSTALADAS, no enlazadas:
     el dashboard se exporta a PDF y las piezas se renderizan en la maquina de
     David. Si no estan instaladas cae a Segoe UI sin romper nada. */
  --fuente-titular: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --fuente-texto:   "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --fuente:         var(--fuente-texto);   /* alias historico */
  --peso-titular:   800;

  /* Escala en px sobre una pieza de 1080 de ancho. */
  --tam-titular-historia: 90px;  /* la pregunta que abre una historia 9:16 */
  --tam-titular:          68px;  /* el mensaje en la pastilla azul, 4:5 */
  --tam-apoyo-historia:   46px;  /* texto de apoyo en 9:16 */
  --tam-bajada:           35px;  /* la explicacion bajo el titular */
  --tam-minimo:           32px;  /* PISO para todo texto que el cliente tenga que leer */
  --tam-credencial:       27px;  /* "22 anos en Quito" en la franja. Etiqueta, no mensaje */
  --tam-pie:              26px;  /* pie y etiquetas. Etiqueta, no mensaje */

  /* --- Espaciado (manual, p. 11): cinco valores, no los que salgan ------ */
  --esp-1:  8px;   /* icono y su etiqueta */
  --esp-2: 16px;   /* elementos de una misma tarjeta */
  --esp-3: 24px;   /* bloques distintos */
  --esp-4: 42px;   /* relleno interno de la pastilla del mensaje */
  --esp-5: 56px;   /* margen lateral de la pieza. El minimo intocable */

  /* --- Forma ----------------------------------------------------------- */
  --radio-pastilla: 24px;   /* pastilla azul del mensaje: la forma de la marca */
  --radio-boton:   100px;   /* boton dorado */
  --radio-caja-logo: 20px;  /* caja blanca del logo sobre foto, con linea azul al pie */
  /* Radios de documentos (dashboard, informes) */
  --radio-sm: 4px;
  --radio:    8px;
  --radio-lg: 12px;

  /* --- Medidas de formato (manual, pp. 10, 12, 17) ---------------------- */
  --franja-logo:  140px;   /* franja blanca superior con el logotipo */
  --logo-alto:     92px;   /* logotipo completo dentro de la franja */
  --logo-min:     220px;   /* por debajo de este ancho, solo el cuadro (isotipo) */
  --isotipo-min:   36px;   /* el cuadro solo, nunca mas chico */
  --zona-segura:  250px;   /* 9:16: arriba y abajo no va ni mensaje, ni logo, ni boton */
}