/* Les valeurs de l'interface. Aucune couleur, aucune dimension ailleurs.
 *
 * Les composants primitifs vivent ici AUSSI, et volontairement : un jeton que
 * personne n'applique est un jeton qui derive. Le bouton est le lieu ou la
 * couleur de marque devient visible ; les separer, c'est autoriser un ecran a
 * redessiner un bouton "presque" pareil.
 *
 * Servi par la route /tokens.css. */

:root{
  /* --- La marque ------------------------------------------------------- */
  --tasty-bleu:#7fcad4;
  --tasty-rose:#f075ab;
  --tasty:linear-gradient(135deg,var(--tasty-bleu),var(--tasty-rose));

  /* --- Fonds et texte -------------------------------------------------- */
  --fond:#0a0a0a;
  --surface:#161616;
  --bord:rgba(255,255,255,.12);
  --texte:#fafafa;
  --attenue:#9a9a9a;

  /* --- Une couleur = une fonction, jamais une decoration --------------- */
  --danger:#e5484d;        /* detruire : franchement rouge, pour ne pas se
                              confondre avec le rose de la marque */
  --danger-bord:rgba(229,72,77,.45);

  /* --- Typographie ----------------------------------------------------- */
  --ui:-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;

  /* --- Rythme ---------------------------------------------------------- */
  --marge:20px;
  --rayon:14px;
  --rayon-petit:10px;
  --touche:48px;           /* hauteur minimale d'une cible tactile */
  --touche-large:56px;     /* l'action principale d'un ecran */
  --touche-petite:38px;    /* un reglage DANS un menu deja ouvert */
  --marge-large:28px;      /* un ecran qui ne porte qu'une seule action */
  --ecart:4px;
  --trait:1px;             /* l'epaisseur de TOUS les filets */
  --rayon-menu:8px;

  /* --- Profondeur et survol -------------------------------------------- */
  --ombre:0 12px 32px rgba(0, 0, 0, .55);
  --survol:rgba(255, 255, 255, .06);
  --survol-actif:rgba(255, 255, 255, .07);
  --sur-marque:#0a0a0a;    /* le texte pose SUR le gradient de marque */
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

body{
  margin:0;
  background:var(--fond);
  color:var(--texte);
  font:400 1rem/1.5 var(--ui);
  -webkit-font-smoothing:antialiased;
}

/* --- Boutons ----------------------------------------------------------- */

.bouton{
  min-height:var(--touche);
  padding:.6rem 1rem;
  border:var(--trait) solid var(--bord);
  border-radius:var(--rayon-petit);
  background:transparent;
  color:var(--texte);
  font:600 .9375rem var(--ui);
  cursor:pointer;
  touch-action:manipulation;
}
.bouton:active{transform:scale(.985)}
.bouton:disabled{opacity:.4;cursor:default}

/* L'action principale. La seule chose qui porte les couleurs de la marque :
   si tout brillait, plus rien ne guiderait. */
.bouton.primaire{
  width:100%;
  min-height:var(--touche-large);
  border:0;
  border-radius:var(--rayon);
  background:var(--tasty);
  color:var(--sur-marque);
  font-size:1.0625rem;
}

.bouton.danger{color:var(--danger);border-color:var(--danger-bord)}

/* --- Champs de saisie -------------------------------------------------- */

.champ{
  width:100%;
  min-height:var(--touche);
  padding:.65rem .8rem;
  background:var(--fond);
  border:var(--trait) solid var(--bord);
  border-radius:var(--rayon-petit);
  color:var(--texte);
  font:400 1rem var(--ui);
}
.champ:focus{outline:2px solid var(--tasty-bleu);outline-offset:-1px}

/* --- Surfaces ---------------------------------------------------------- */

.carte{
  background:var(--surface);
  border:var(--trait) solid var(--bord);
  border-radius:var(--rayon);
}

/* --- Etiquettes -------------------------------------------------------- */

.role{
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tasty-bleu);
  white-space:nowrap;
}

.surtitre{
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--attenue);
  margin:0;
}

[hidden]{display:none!important}