/* ===========================================================================
   JurisOne — fichas del sistema
   Un solo matiz: hsl(250 70% L). La tinta es el morado a 12 % de luz.
   Nada de esto se repite suelto en las hojas de abajo.
   =========================================================================== */

:root {
  /* — color — */
  --papel:      #FFFFFF;
  --morado:     #4D30DA;            /* hsl(250 70% 52%) — el del logo */
  --menta:      #00F3A9;            /* hsl(162 100% 48%) — el del logo */
  --tinta:      #110934;            /* hsl(250 70% 12%) */

  /* el morado moviendo solo la luz */
  --l-08: hsl(250 70% 8%);
  --l-12: var(--tinta);
  --l-19: hsl(250 70% 19%);
  --l-26: hsl(250 70% 26%);
  --l-34: hsl(250 70% 34%);
  --l-41: hsl(250 70% 41%);
  --l-52: var(--morado);
  --l-62: hsl(250 70% 62%);
  --l-72: hsl(250 70% 72%);
  --l-80: hsl(250 70% 80%);
  --l-86: hsl(250 70% 86%);
  --l-94: hsl(250 70% 94%);
  --l-97: hsl(250 70% 97%);

  /* la menta moviendo solo la luz (para las caras del objeto) */
  --m-42: hsl(162 100% 42%);
  --m-34: hsl(162 100% 34%);
  --m-26: hsl(162 100% 26%);

  /* — papeles de cada campo — */
  --campo:        var(--papel);
  --texto:        var(--tinta);
  --texto-suave:  var(--l-34);
  --acento:       var(--morado);
  --foco:         var(--morado);

  /* — retícula — */
  --ancho: 1180px;
  --marg: clamp(20px, 9vw, 130px);
  --pad-sec: clamp(72px, 9vw, 132px);
  --solape: clamp(44px, 6vw, 92px);

  /* — escala tipográfica — */
  --t-hero:   clamp(2.05rem, 4.6vw, 4rem);
  --t-sec:    clamp(1.8rem, 3.9vw, 3.15rem);
  --t-tier:   clamp(1.45rem, 2.7vw, 2.3rem);
  --t-sub:    clamp(1.15rem, 1.8vw, 1.55rem);
  --t-ficha:  clamp(1.1rem, 1.35vw, 1.3rem);
  --t-cuerpo: clamp(1rem, 1.05vw, 1.0625rem);
  --t-menor:  0.9375rem;
  --t-cifra:  clamp(2.4rem, 4.6vw, 3.8rem);

  /* — radios, sin cantos ni filetes — */
  --r-ficha: 22px;
  --r-flota: 28px;
  --r-losa: 14px;
  --r-pastilla: 999px;

  /* — sombras: solo tinta, nunca un gris ajeno — */
  --s-baja:  0 2px 6px rgb(17 9 52 / 0.05), 0 12px 28px -14px rgb(17 9 52 / 0.16);
  --s-alta:  0 4px 10px rgb(17 9 52 / 0.06), 0 34px 60px -26px rgb(17 9 52 / 0.32);
  --s-techo: 0 10px 30px -12px rgb(17 9 52 / 0.20);

  /* — movimiento — */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-mov: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Campos oscuros: cambian el papel y con él todo lo que de él depende.
   El color se aplica aquí mismo, no solo la ficha: hay campos que no son
   .seccion (los escalones, el campo partido) y también tienen que teñir. */
.campo-oscuro {
  --campo: var(--tinta);
  --texto: var(--papel);
  --texto-suave: var(--l-86);
  --acento: var(--menta);
  --foco: var(--menta);
  color: var(--texto);
}