/* Jetons de style de l'application SCI.
 *
 * Un seul endroit definit les couleurs, les rayons et les polices. Les
 * ecrans ne contiennent aucune valeur en dur : ils consomment ces jetons.
 * C'est ce qui rend un second habillage possible sans dupliquer un gabarit.
 *
 * Le choix de l'habillage se fait par l'attribut data-habillage sur <html>.
 * Par defaut, « sobre ». L'habillage « village » est l'autre peau, pour les
 * ecrans du quotidien, et ne s'applique jamais a l'administration.
 */

:root,
:root[data-habillage="sobre"] {
  /* Fond et texte */
  --sci-fond: #f6f7f9;
  --sci-surface: #ffffff;
  --sci-surface-creuse: #eef1f5;
  --sci-texte: #1b2230;
  --sci-texte-doux: #5a6678;
  --sci-bordure: #dde3ec;

  /* Couleur porteuse : un bleu ardoise, lisible et peu bavard */
  --sci-primaire: #2f5d7c;
  --sci-primaire-clair: #3d7ba4;
  --sci-primaire-contraste: #ffffff;

  /* Etats. Jamais seuls : toujours accompagnes d'un mot, voir 03-UX.md. */
  --sci-retard: #b4232a;
  --sci-retard-fond: #fdecec;
  --sci-bientot: #9a5b00;
  --sci-bientot-fond: #fdf3e2;
  --sci-ok: #1f6b45;
  --sci-ok-fond: #e8f5ee;

  --sci-rayon: 8px;
  --sci-rayon-large: 14px;
  --sci-ombre: 0 1px 2px rgba(20, 30, 50, .06), 0 4px 12px rgba(20, 30, 50, .05);

  --sci-police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --sci-police-chiffres: ui-monospace, "SF Mono", "Cascadia Mono", Consolas,
    monospace;
}

/* Habillage « village ». Les valeurs definitives viendront avec les ecrans
 * du quotidien : ce bloc existe des maintenant pour que rien ne soit ecrit
 * en dur ailleurs, et que basculer d'une peau a l'autre reste un attribut. */
:root[data-habillage="village"] {
  --sci-fond: #dff2c8;
  --sci-surface: #fffdf4;
  --sci-surface-creuse: #f3e9c8;
  --sci-texte: #2d2518;
  --sci-texte-doux: #6b5c3e;
  --sci-bordure: #c2a964;

  --sci-primaire: #c9452f;
  --sci-primaire-clair: #e4663f;
  --sci-primaire-contraste: #fffdf4;

  --sci-retard: #a32015;
  --sci-retard-fond: #f8ded6;
  --sci-bientot: #a06a12;
  --sci-bientot-fond: #f9eccb;
  --sci-ok: #2f7d32;
  --sci-ok-fond: #ddf0cf;

  --sci-rayon: 0px;
  --sci-rayon-large: 0px;
  --sci-ombre: 3px 3px 0 var(--sci-bordure);

  --sci-police: "Press Start 2P", ui-monospace, monospace;
  --sci-police-chiffres: "Press Start 2P", ui-monospace, monospace;
}

/* Mode sombre, uniquement pour l'habillage sobre. Le village a sa propre
 * ambiance et ne suit pas la preference systeme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-habillage="village"]):not([data-habillage="sobre-clair"]) {
    --sci-fond: #10151d;
    --sci-surface: #19202b;
    --sci-surface-creuse: #222b38;
    --sci-texte: #e7ecf3;
    --sci-texte-doux: #9aa7b8;
    --sci-bordure: #2d3846;

    --sci-primaire: #6fa8cc;
    --sci-primaire-clair: #8dc0e0;
    --sci-primaire-contraste: #0d1218;

    --sci-retard: #ff8d8d;
    --sci-retard-fond: #3a1f22;
    --sci-bientot: #e8b765;
    --sci-bientot-fond: #3a2f1c;
    --sci-ok: #7fd3a4;
    --sci-ok-fond: #17301f;

    --sci-ombre: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .35);
  }
}