/**
 * Variables du thème de la dist SPIP
 *
 * 1. Variables publiques
 * 2. Variables privées
 * 3. Thème clair / sombre
 */


/**
 * 1. Variables publiques
 * Ces variables peuvent être surchargées pour modifier l'apparence à peu de frais.
 * On peut copier cette section dans un article documentant les variables.
 */

:root {
  /* == Couleurs == */
  /* Couleur d'accent : composants HSL */
  --dist-color-accent--h: 337;
  --dist-color-accent--s: 81%;
  --dist-color-accent--l: 47%;
  /* Couleur du fond de la page */
  --dist-color-page: hsl(0, 0%, 97%);
  /* Couleur du texte */
  --dist-color-text: hsl(0, 0%, 10%);
  --dist-color-text-muted: hsl(0, 0%, 44%);

  /* == Typographie == */
  --dist-line-height: 1.6;
  --dist-font-size: 1em;
  --dist-font-size-rem: 1rem; /* hum... pour --dist-spacing */
  /* Polices principale */
  --dist-font-family: "Luxi sans", "Lucida Grande", Lucida, "Lucida Sans Unicode", sans-serif;
  /* Police des titres */
  --dist-font-family-headings: var(--dist-font-family);
  /* Police des codes informatiques */
  --dist-font-family-code: "Courier New", Courier, monospace;
  /* Polices utilitaires diverses */
  --dist-font-family-1: serif;
  --dist-font-family-2: sans-serif;
  --dist-font-family-3: monospace;
  --dist-font-family-4: fantasy;


  /* == Layout == */
  /* Largeur max de la page */
  --dist-page-width: 960px;

  /* == Divers == */
  --dist-border-radius: 0.25em;
}


/**
 * 2. Variables privées
 * Ces variables sont à usage interne et sont susceptibles de changer,
 * il n'est pas recommandé de les surcharger.
 * Ne pas les référencer dans l'article documentant les variables.
 */
 :root {
  /* Couleur d'accent avec plus ou moins de contraste (clair / foncé) */
  --dist-color-accent-softest: hsl(var(--dist-color-accent--h), var(--dist-color-accent--s), calc(var(--dist-color-accent--l) * 1.9));
  --dist-color-accent-softer:  hsl(var(--dist-color-accent--h), var(--dist-color-accent--s), calc(var(--dist-color-accent--l) * 1.7));
  --dist-color-accent-soft:    hsl(var(--dist-color-accent--h), var(--dist-color-accent--s), calc(var(--dist-color-accent--l) * 1.5));
  --dist-color-accent:         hsl(var(--dist-color-accent--h), var(--dist-color-accent--s), var(--dist-color-accent--l));
  --dist-color-accent-hard:    hsl(var(--dist-color-accent--h), var(--dist-color-accent--s), calc(var(--dist-color-accent--l) / 1.1));
  --dist-color-accent-harder:  hsl(var(--dist-color-accent--h), var(--dist-color-accent--s), calc(var(--dist-color-accent--l) / 1.2));
  --dist-color-accent-hardest: hsl(var(--dist-color-accent--h), var(--dist-color-accent--s), calc(var(--dist-color-accent--l) / 1.3));
  /* Couleur neutre (gris clair / foncé) */
  --dist-color-neutral-softest: hsl(var(--dist-color-accent--h), 5%, 94%);
  --dist-color-neutral-softer:  hsl(var(--dist-color-accent--h), 5%, 90%);
  --dist-color-neutral-soft:    hsl(var(--dist-color-accent--h), 5%, 86%);
  --dist-color-neutral:         hsl(var(--dist-color-accent--h), 5%, 60%);
  --dist-color-neutral-hard:    hsl(var(--dist-color-accent--h), 5%, 25%);
  --dist-color-neutral-harder:  hsl(var(--dist-color-accent--h), 5%, 20%);
  --dist-color-neutral-hardest: hsl(var(--dist-color-accent--h), 5%, 15%);
  /* Couleur des liens */
  --dist-color-link:           var(--dist-color-accent);
  --dist-color-link-hover:     var(--dist-color-accent-hard);
  /* Couleurs des états */
  --dist-color-success--h:     90;
  --dist-color-success-text:   hsl(var(--dist-color-success--h), 100%, 20%);
  --dist-color-success-bg:     hsl(var(--dist-color-success--h), 77%, 85%);
  --dist-color-success-border: hsl(var(--dist-color-success--h), 77%, 66%);
  --dist-color-info--h:        200;
  --dist-color-info-text:      hsl(var(--dist-color-info--h), 100%, 25%);
  --dist-color-info-bg:        hsl(var(--dist-color-info--h), 77%, 88%);
  --dist-color-info-border:    hsl(var(--dist-color-info--h), 77%, 70%);
  --dist-color-notice--h:      50;
  --dist-color-notice-text:    hsl(var(--dist-color-notice--h), 100%, 25%);
  --dist-color-notice-bg:      hsl(var(--dist-color-notice--h), 100%, 85%);
  --dist-color-notice-border:  hsl(var(--dist-color-notice--h), 77%, 66%);
  --dist-color-error--h:       5;
  --dist-color-error-text:     hsl(var(--dist-color-error--h), 100%, 25%);
  --dist-color-error-bg:       hsl(var(--dist-color-error--h), 77%, 93%);
  --dist-color-error-border:   hsl(var(--dist-color-error--h), 77%, 85%);

  /* Espacements */
  --dist-spacing:              calc(var(--dist-line-height) * var(--dist-font-size-rem)); /* = hauteur d'1 ligne de texte */
  --dist-spacing-xxs:          calc(var(--dist-spacing) / 4);
  --dist-spacing-xs:           calc(var(--dist-spacing) / 3);
  --dist-spacing-sm:           calc(var(--dist-spacing) / 2);
  --dist-spacing-md:           calc(var(--dist-spacing) * 2);
  --dist-spacing-xl:           calc(var(--dist-spacing) * 3);
  --dist-spacing-xxl:          calc(var(--dist-spacing) * 4);

  /* Divers */
  --dist-border-radius-xs:     calc(var(--dist-border-radius) / 2);
  --dist-border-radius-sm:     calc(var(--dist-border-radius) / 1.5);
  --dist-border-radius-md:     calc(var(--dist-border-radius) * 1.5);
  --dist-border-radius-xl:     calc(var(--dist-border-radius) * 2);
}


/**
 * 1. Thème clair / sombre
 * WIP : à faire plus tard
 */