/* Les fondations des interfaces de chat Synaps : couleurs, ombres, rayons,
   typographie, mouvement. Des variables seulement, aucun composant — de
   quoi les reprendre telles quelles dans l'assistant création de site.

   Arrêtées le 26/10 avec Loïc, quand on a quitté le plat brutaliste : le
   relief vient d'abord des surfaces (le fond, ce qui est posé dessus, ce
   qui est en retrait) et de la typographie ; les ombres sont douces et
   diffuses, jamais décalées ni dures. Le niveau 3 n'existe que pour la
   barre de décision. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/archivo-latin-var.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 600 800; font-display: swap; src: url('fonts/newsreader-latin-var.woff2') format('woff2'); }

:root {
  /* les plans */
  --fond: #F4F1E9;            /* le papier, derrière tout */
  --surface: #FFFDF9;         /* ce qui est posé dessus : ce qui demande une décision */
  --retrait: #EFEAE0;         /* ce qui est en creux : pistes, panneaux, infos */
  --trait: rgba(20, 17, 15, .10);
  --trait-fort: rgba(20, 17, 15, .22);

  /* le texte, en trois forces — le troisième jamais plus clair : il passe
     encore 4,5:1 sur le fond et sur le retrait */
  --texte: #14110F;
  --texte-2: #4A433C;
  --texte-3: #6B635A;

  /* l'action, et ce qui change */
  --orange: #C34111;
  --orange-fonce: #A3350C;
  --orange-doux: #FBEAE2;
  --anneau: rgba(195, 65, 17, .38);

  /* ce qui est fait */
  --vert: #2F6B3A;
  --vert-doux: #E5F0E6;
  --rouge: #A42A1F;

  /* les ombres : posé, levé, en avant (la barre de décision seulement) */
  --ombre-1: 0 1px 2px rgba(20, 17, 15, .06);
  --ombre-2: 0 2px 4px rgba(20, 17, 15, .04), 0 10px 28px -6px rgba(20, 17, 15, .14);
  --ombre-3: 0 4px 10px rgba(20, 17, 15, .05), 0 18px 40px -12px rgba(20, 17, 15, .16);

  /* les rayons */
  --r-controle: 10px;
  --r-carte: 16px;
  --r-bulle: 20px;
  --r-capture: 12px;

  /* la typographie */
  --police-titre: "Newsreader", Georgia, serif;
  --police: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-titre-1: clamp(32px, 5.5vw, 48px);
  --t-titre-2: 24px;
  --t-texte: 17px;
  --t-courant: 15px;
  --t-petit: 13px;

  /* le mouvement */
  --courbe: cubic-bezier(.2, .7, .3, 1);
  --duree: 220ms;

  /* la colonne du fil */
  --col: 46rem;
}