/* public/css/tokens.css
   Mundo visual: carta topográfica.
   Una carta no declara el terreno, lo deriva de mediciones acumuladas. Es el
   mismo mecanismo del sistema: nada se declara, todo se deriva del ledger.

   El mundo aporta cuatro cosas y solo cuatro: tipografía, paleta, densidad y
   un movimiento firma (las curvas de nivel). Nunca la navegación ni los
   controles, que son los estándar de la web. */

:root{
  /* --- Paleta ---------------------------------------------------------
     El azul hace de hidrografía: en una carta marca el agua, y es el azul
     oficial del logo. El ámbar hace de curva de nivel y solo aparece en
     foco y en estado, nunca como decoración. */
  --azul:        #004F86;
  --azul-hondo:  #00335A;
  --azul-claro:  #1C76BC;
  --ambar:       #F6B62D;
  --ambar-hondo: #A8720A;

  /* Papel de la hoja del formulario */
  --papel:       #E4E8E6;
  --papel-alto:  #F2F4F3;
  --papel-hondo: #D2D8D6;

  /* Tinta */
  --tinta:       #10222F;
  --tinta-suave: #4E6676;
  --sobre-azul:  #EAF1F6;

  /* Línea de base de los campos en reposo. Tiene que leerse como un trazo
     dibujado, no como una sombra: contra el papel de la hoja da más de 3:1. */
  --linea-campo: #7A8E9A;

  /* Estado */
  --error:       #9B2C14;
  --error-fondo: #F6E7E2;
  --ok:          #1C5E46;
  --ok-fondo:    #E3EEE9;

  /* --- Tipografía -----------------------------------------------------
     Archivo es una grotesca dibujada para señalética y rotulación: el
     registro de una carta topográfica, con carácter y sin expresividad.
     Archivo Narrow para los rótulos, que en un mapa siempre aprietan. */
  --tipo:        'Archivo', system-ui, sans-serif;
  --tipo-rotulo: 'Archivo Narrow', 'Archivo', system-ui, sans-serif;

  --t-xs:  .75rem;
  --t-sm:  .875rem;
  --t-md:  1rem;
  --t-lg:  1.3rem;

  /* --- Medidas --------------------------------------------------------
     Columna de ancho fijo: el logo y el formulario comparten una sola
     medida, y por eso el formulario no se corre al cambiar la ventana. */
  --columna:     min(26rem, 100% - 2.5rem);
  --radio:       3px;
  --trazo:       1.5px;
  --sombra:      0 14px 34px -12px rgba(16, 34, 47, .34);

  /* --- Lámina ---------------------------------------------------------
     Estas variables son lo único que distingue la versión azul de la
     versión clara. Ver el bloque [data-lamina="papel"] más abajo. */
  --lamina-fondo:  var(--azul-hondo);
  --lamina-velo:   linear-gradient(180deg, rgba(0,51,90,.30) 0%, rgba(0,51,90,.62) 100%);
  --lamina-platos: block;
  --curva-opaca:   .34;
  --curva-tenue:   .20;
  --franja-tono:   228, 232, 230;
}

/* --------------------------------------------------------------------------
   VARIANTE CLARA
   Para verla: agregá data-lamina="papel" a la etiqueta <html> de la pantalla.
   Es una sola línea y no toca nada más:
       <html lang="es" data-lamina="papel">
   Sin ese atributo manda la versión azul, que es la aprobada.
-------------------------------------------------------------------------- */
:root[data-lamina="papel"]{
  --lamina-fondo:  var(--papel);
  --lamina-velo:   radial-gradient(120% 90% at 18% 0%, rgba(28,118,188,.14) 0%, transparent 58%),
                   radial-gradient(100% 80% at 88% 100%, rgba(246,182,45,.16) 0%, transparent 48%);
  --lamina-platos: none;
  --curva-opaca:   .30;
  --curva-tenue:   .16;
  --franja-tono:   242, 244, 243;
}

*{ box-sizing: border-box }
html, body{ margin:0; padding:0 }

html{
  /* El papel se extiende más allá de la lámina para que el rebote del
     scroll en móvil no muestre un fondo ajeno al mundo. */
  background: var(--lamina-fondo);
}

body{
  font-family: var(--tipo);
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* --- Superficies del navegador -------------------------------------------
   Selección, cursor, foco y barra de scroll vienen con colores que no
   pertenecen a ningún sistema de diseño. Se visten con la paleta. */
::selection{ background: var(--ambar); color: var(--tinta) }

:root{ caret-color: var(--azul); accent-color: var(--azul) }

/* Anillo de foco: azul hondo, que contra el papel de la hoja llega a 12:1.
   El ámbar sobre claro no daba contraste suficiente. El halo blanco lo hace
   visible también si algún día cae sobre la lámina azul. */
:focus-visible{
  outline: 2px solid var(--azul-hondo);
  outline-offset: 3px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--papel-alto);
}

@supports (scrollbar-color: auto){
  html{ scrollbar-color: var(--azul) var(--papel-hondo); scrollbar-width: thin }
}

a{
  color: var(--azul);
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
}
a:hover{ color: var(--azul-claro) }

@media (prefers-reduced-motion: reduce){
  *{ transition-duration: .01ms !important; animation-duration: .01ms !important }
}