/* Mataró Basket Academy — les fitxes del sistema.
 *
 * Aquí no hi ha cap regla: només valors. Els fa servir tant el fullet (HTML) com
 * l'aplicació (React), i per això no depenen de cap llibreria.
 *
 * La paleta és la del Jordi. El que s'hi afegeix és el que ell no necessitava i
 * l'aplicació sí: intensitats del mateix teal, un color d'alarma, i els tres
 * colors dels tipus d'esdeveniment. Cap hue nou tret de l'alarma.
 */

:root {
  /* ---------------------------------------------------------------- marca */
  /* El teal del Jordi és el --teal-500. La resta són el mateix color, més fosc
     o més clar, per fer vores, fons i estats sense inventar-ne cap. */
  --teal-900: #1a4d5c;
  --teal-700: #23697d;
  --teal-500: #2c87a0;   /* el del Jordi */
  --teal-300: #7fb6c6;
  --teal-100: #dcebef;

  --sorra-700: #a98a55;
  --sorra-500: #d8c39b;  /* el del Jordi */
  --sorra-300: #e7d8ba;
  --sorra-100: #f3ead9;

  /* La llima de les tres pastilles de dalt. Jo la trauria, però mana el disseny
     del Jordi i al seu hi és. */
  --llima-500: #bada55;
  --llima-700: #9cbd3c;

  --negre:     #0d1014;
  /* La franja de la capcalera es negre PUR, com la del Jordi: el seu #000 contra
     la foto, que a sota no es negra del tot, es el que fa la «linia» que se li
     veu. No hi ha cap vora dibuixada: buscada a la seva i no n'hi ha cap. */
  --negre-capcalera: #000000;
  --negre-700: #23262c;
  --negre-500: #33383d;
  --gris-300:  #c9ced3;
  --gris-100:  #eff1f2;
  --crema:     #f5f1e9;  /* el fons del Jordi */
  --blanc:     #ffffff;

  /* ------------------------------------------------------------- alarma */
  /* L'única peça nova. Ni el teal ni el sorra fan pressa, i «Caduca en 2 dies»
     n'ha de fer. És una terracota, no un vermell de semàfor: conviu amb el sorra. */
  --alarma-700: #8f2f1f;
  --alarma-500: #c2412d;
  --alarma-100: #f8e4df;

  /* --------------------------------------------- tipus d'esdeveniment */
  /* Tres tipus que s'han de distingir d'un cop d'ull sense inventar colors:
     surten dels que ja hi ha. Al calendari van com a barra lateral i etiqueta. */
  --event-entrenament: var(--teal-500);
  --event-classe:      var(--sorra-700);
  --event-partit:      var(--negre-500);
  --event-clinic:      #7a4b8f;  /* pruna: el Clínic (Jordi, 10-set), lluny del teal, la sorra i el negre */

  /* --------------------------------------------------------- paper i tinta */
  /* El paper de la pagina es BLANC; el crema son franges. A la nostra copia
     estava al reves i es notava de seguida. */
  --fons:          var(--blanc);
  --fons-alt:      var(--crema);
  --fons-fosc:     var(--negre);
  --tinta:         var(--teal-500);   /* el Jordi escriu el cos en teal */
  --tinta-forta:   var(--teal-900);
  --tinta-fluixa:  #6b7a80;
  --tinta-sobre-sorra: var(--negre-500);
  --vora:          #e2ddd3;
  --vora-forta:    var(--gris-300);

  /* ---------------------------------------------------------------- lletra */
  /* INVENTARI de la portada del Jordi, comptant element per element:
       barlow-v2 ................ 55 elements  (tot)
       dinneuzeitgrotesk ......... 3 elements  (nomes «UN OBJECTIU / UN PLA / UNA EVOLUCIO»)
       avenir .................... 1 element   (el boto «Entrar», que es de Wix)
     O sigui que la web del Jordi ES Barlow. L'Avenir que jo perseguia era un boto
     de la interficie de Wix, no del client. El DIN nomes cal per al lema, i alla
     el substitueix Barlow Condensed, que hi coincideix en amplada. */
  --lletra-cos: "Barlow", -apple-system, "Segoe UI", Roboto, sans-serif;
  --lletra-titular: "Barlow", -apple-system, "Segoe UI", Roboto, sans-serif;
  /* El lema es l'unic lloc amb DIN Neuzeit Grotesk. Mesurat contra el model:
     Archivo amb l'amplada variable a 62 hi surt a +2,0%; Barlow Condensed, a +6,0%,
     i normalitzant per alcada de majuscula, a +13,5%. El DIN es mes estret que
     totes les condensades lliures, i nomes una d'amplada variable el pot atrapar. */
  /* El lema del Wix es DIN Neuzeit Grotesk Bold Condensed (de pagament);
     l'Oswald es la gratuita amb el mateix TRAÇ GRUIXUT condensat (la Barlow
     Condensed era massa fina: costat a costat es veia; Oriol 25-ago). */
  --lletra-lema: "Oswald", "Arial Narrow", Arial, sans-serif;
  --amplada-lema: 62;

  /* Les mides i els pesos, mesurats a la seva pagina */
  --t-hero: 4.0625rem;      /* 65 px · pes 800 · el nom de la portada */
  --t-signatura: 1.875rem;  /* 30 px · pes 800 · «by Jordi Ventura» */
  --t-lema: 3.625rem;       /* 58 px · pes 700 · UN OBJECTIU */
  --t-seccio: 4.0625rem;    /* 65 px · pes 700 · els titols de seccio */

  /* L'escala petita, per a peces d'interficie (xips, dates, etiquetes).
     Va desapareixer sense voler amb la correccio de Barlow: aqui torna. */
  --t-12: 0.75rem;
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-22: 1.375rem;
  --t-28: 1.75rem;

  /* CORRECCIO 25-ago, mesurant pagina a pagina: el cos NORMAL del Jordi es 400
     (grup reduit, individual...); el 600 nomes es cert als paragrafs de la
     intro de la portada, que tenen regla propia. */
  --pes-cos: 400;
  --pes-cos-fluix: 400;    /* les llistes de les targetes */
  --pes-menu: 700;         /* 14 px */
  --pes-boto: 700;         /* 15-16 px, lletratge 4 px */
  --pes-contacte: 500;     /* 14 px, lletratge 1,4 px */
  --pes-hero: 800;
  --pes-titol-seccio: 700;
  --pes-titular: 700;

  --alcada-titular: 1.02;
  --alcada-cos: 1.4;      /* 25,2 px sobre 18 px, com el seu */
  --lletratge-titular: 0.01em;
  --lletratge-etiqueta: 0.12em;

  /* ----------------------------------------------------------------- espai */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-6: 1.5rem;
  --e-8: 2rem;
  --e-12: 3rem;
  --e-16: 4rem;
  --e-24: 6rem;

  /* --------------------------------------------------------- formes i mides */
  /* El Jordi no fa cantonades rodones enlloc tret dels botons, que són pastilles. */
  --radi-0: 0;
  --radi-pastilla: 999px;
  --ombra-1: 0 1px 2px rgba(13, 16, 20, 0.06);
  --ombra-2: 0 4px 16px rgba(13, 16, 20, 0.10);
  --ombra-3: 0 12px 40px rgba(13, 16, 20, 0.22);

  /* 980 px, com el Jordi: la seva web ancora tot a una columna de 980 centrada,
     i les alçades de la capçalera (114) i de la foto de portada (855) son fixes,
     no escalen amb la finestra. Comprovat a 1000 i a 1920 px. */
  --ample-pagina: 980px;
  --alt-capcalera: 114px;
  --alt-portada: 855px;
  --ample-prosa: 74ch;
  --banda: 64px;

  --transicio: 0.15s ease;
}