/* ------------------------------------------------------------------
   TOKENS (sistema v3; v1 + escala dels nivells previs). Tot el que és "marca" i "escala" viu aquí.
   Les fitxes només poden fer servir aquests noms (var(--acento), var(--il-groc)...),
   mai colors directes: build.py ho valida. Per això el tema B/N només cal
   redefinir-los, i cap fitxa pot sortir de la identitat de marca.
   Capes (de menys a més prioritat): marc < kit < ficha. La fitxa mai no pot
   tocar el marc perquè el seu CSS només s'aplica dins de .cos-ficha (@scope).
   ------------------------------------------------------------------ */
@layer marc, kit, ficha;

:root {
  /* marca (fixa) */
  --marca: #1f3a5f;
  --marca-2: #f26b3a;
  --tinta: #1b1b1b;
  --tinta-suau: #555;
  --paper: #fff;
  --linia: #222;
  --radi: 12px;
  --gruix: 1.5px; /* >= 0,5 pt: es manté llegible en impressores bàsiques */

  /* eines de pantalla (mateix llenguatge que el web) */
  --web-fons: #faf8f4;
  --web-linia: #e4dfd4;
  --web-tinta: #1f2a44;
  --taula: #ebe6dc;

  /* semàntics (els sobreescriu l'assignatura i el tema) */
  --acento: var(--marca);
  --acento-suau: #eef2f7;
  --vora-bn: solid;
  --ok: #2b8a3e;
  --reintent: #b36b00;

  /* escala per nivell (valors per defecte = cicle mitjà) */
  --fs: 18px;
  --lh: 1.6;
  --espai: 1.1rem;

  /* escala tipogràfica (relativa a --fs) */
  --t-xs: .75em;
  --t-s: .88em;
  --t-m: 1em;
  --t-l: 1.25em;
  --t-xl: 1.6em;
  --t-xxl: 2.3em;
  --t-gegant: 3.4em;

  --tipus-text: "Andika", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --tipus-marca: "Fredoka", "Andika", system-ui, sans-serif;

  /* paleta d'il·lustració: les imatges de la fitxa pinten NOMÉS amb aquests tons,
     així l'estil és coherent a tot el web i el B/N es tradueix a una rampa de grisos */
  --il-contorn: #23304d;
  --il-blanc: #ffffff;
  --il-vermell: #e5484d;
  --il-taronja: #f59f3a;
  --il-groc: #ffd43b;
  --il-verd: #51b36b;
  --il-verd-fosc: #2f8f4e;
  --il-herba: #b2f2bb;
  --il-blau: #4dabf7;
  --il-blau-fosc: #2f6fdd;
  --il-cel: #d0ebff;
  --il-lila: #9775fa;
  --il-rosa: #f783ac;
  --il-marro: #a9744f;
  --il-pell: #f5c9a0;
  --il-sorra: #f3e0b0;
  --il-gris: #ced4da;
  --il-ombra: rgba(35, 48, 77, .16);
}

/* Nivells previs (Previ a 1r = 7, Transició a 1r = 8): lletra molt gran, màxim espai per escriure */
[data-nivell="7"] { --fs: 22px; --lh: 1.8; --espai: 1.4rem; }
[data-nivell="8"] { --fs: 20px; --lh: 1.7; --espai: 1.2rem; }
/* Cicle inicial: lletra gran, molt d'espai per escriure */
[data-nivell="1"], [data-nivell="2"] { --fs: 21px; --lh: 1.7; --espai: 1.2rem; }
/* Cicle mitjà (3r-4t) */
[data-nivell="3"], [data-nivell="4"] { --fs: 16.5px; --lh: 1.5; --espai: .85rem; }
/* Cicle superior (5è-6è) */
[data-nivell="5"], [data-nivell="6"] { --fs: 15px; --lh: 1.42; --espai: .6rem; }

/* Tema blanc i negre: sense color; les il·lustracions es tradueixen a grisos
   diferenciables i la diferència entre assignatures la porta la icona i el tipus de vora. */
html[data-tema="bn"] [data-assignatura],
html[data-tema="bn"] [data-nivell],
html[data-tema="bn"] {
  --acento: #000;
  --acento-suau: #fff;
  --ok: #000;
  --reintent: #000;
  --tinta-suau: #333;
  --marca: #000;

  --il-contorn: #000;
  --il-vermell: #8c8c8c;
  --il-taronja: #bdbdbd;
  --il-groc: #e8e8e8;
  --il-verd: #a3a3a3;
  --il-verd-fosc: #6b6b6b;
  --il-herba: #dedede;
  --il-blau: #b3b3b3;
  --il-blau-fosc: #5c5c5c;
  --il-cel: #f1f1f1;
  --il-lila: #969696;
  --il-rosa: #d1d1d1;
  --il-marro: #787878;
  --il-pell: #f4f4f4;
  --il-sorra: #e3e3e3;
  --il-gris: #cfcfcf;
  --il-ombra: rgba(0, 0, 0, .14);
}