/* «Nos toca» · tokens (SPEC §2.1, copiados tal cual). La regla de color, la única: las personas en frío
   (azul mar, buganvilla), la prisa en cálido (rojo, amarillo). */
:root{
  color-scheme: light dark;
  --fondo:#FBF7F5; --sup:#FFFFFF; --sup2:#F3EDEB; --linea:#ECE3E1;
  --tinta:#2A2131; --tinta2:#6D6273; --tinta3:#A39AA7; --aro:#8F8493;
  --fran:#2F64D8; --fran-s:#E6EDFC; --fran-t:#FFFFFF; --fran-inv:#A9C2FF;
  --anas:#B0338A; --anas-s:#F9E6F2; --anas-t:#FFFFFF; --anas-inv:#F5AEDD;
  --venc:#C6362B; --venc-t:#FFFFFF; --peligro:#B42E24;
  --hoy:#F5B414;  --hoy-t:#3A2900;
  --man:#FCEFCB;  --man-t:#7A5200;
  --lej:#F1EBED;  --lej-t:#5B5161;
  --inv:#2A2131;  --inv-t:#FBF7F5; --inv-t2:#D3CAD6;
  --velo:rgba(42,24,46,.34);
  --sombra:0 1px 2px rgba(42,33,49,.05),0 6px 18px rgba(42,33,49,.06);
  --sombra-f:0 2px 6px rgba(42,33,49,.08),0 14px 36px rgba(42,33,49,.14);
  --sombra-hoja:0 -12px 40px rgba(20,10,25,.16);
  --borde:transparent;
  --yo:var(--fran); --yo-s:var(--fran-s); --yo-t:var(--fran-t); --yo-inv:var(--fran-inv);
  --fuente:'Bricolage',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --suave:cubic-bezier(.2,.8,.2,1);
  --muelle:cubic-bezier(.2,.9,.25,1.15);
}
@media (prefers-color-scheme: dark){
  :root{
    --fondo:#18131C; --sup:#231D28; --sup2:#2F2835; --linea:#382F3E;
    --tinta:#F4EEF3; --tinta2:#B5AABA; --tinta3:#7E7384; --aro:#8A7F90;
    --fran:#86ABFF; --fran-s:#1F2B48; --fran-t:#0B1630; --fran-inv:#2F5FD0;
    --anas:#F08BD0; --anas-s:#3F1F38; --anas-t:#36082A; --anas-inv:#A12C7E;
    --venc:#C2362C; --venc-t:#FFFFFF; --peligro:#FF8A7B;
    --hoy:#F7C548;  --hoy-t:#332400;
    --man:#3B3016;  --man-t:#F4CD6A;
    --lej:#2F2835;  --lej-t:#CDC3D1;
    --inv:#F4EEF3;  --inv-t:#231D28; --inv-t2:#5E5464;
    --velo:rgba(0,0,0,.55);
    --sombra:none;
    --sombra-f:0 18px 40px rgba(0,0,0,.5);
    --sombra-hoja:0 -12px 40px rgba(0,0,0,.5);
    --borde:var(--linea);
  }
}
:root.yo-anas{ --yo:var(--anas); --yo-s:var(--anas-s); --yo-t:var(--anas-t); --yo-inv:var(--anas-inv); }
/* Lo que varía por fila va por CLASE (nunca atributos de estilo en el HTML, §2.9) */
.fila{ --hecho:var(--yo); --hecho-t:var(--yo-t); --destello:var(--yo); }
.hecha-fran{ --hecho:var(--fran); --hecho-t:var(--fran-t); }   .hecha-anas{ --hecho:var(--anas); --hecho-t:var(--anas-t); }
.dest-fran{ --destello:var(--fran); }                           .dest-anas{ --destello:var(--anas); }
b,strong{ font-weight:650; }   /* solo existen 500, 650 y 720 (§2.3) */