/* Espacement, rayons, ombres, mouvement */
:root {
  /* Échelle d'espacement — base 4, mais les valeurs de la charte
     sont celles-ci et pas des multiples arbitraires */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 28px;
  --space-7: 40px;
  --space-8: 60px;
  --space-9: 90px;
  --space-10: 140px;

  /* Gouttières et marges de page */
  --gutter: 14px;            /* entre images d'une grille */
  --page-x: 100px;           /* marge horizontale, grand écran */
  --page-x-mobile: 24px;
  --slide-x: 90px;           /* marge horizontale, slide 1920 */
  --slide-y: 72px;

  /* Rayons — deux seulement. Angle vif pour l'éditorial,
     pastille pleine pour la fête. Rien entre les deux. */
  --radius-0: 0px;
  --radius-image: 14px;
  --radius-pill: 999px;

  /* Filets */
  --hairline: 1px;
  --rule-thick: 2px;

  /* Ombres — jamais de flou diffus. Un décalage franc, sans blur,
     comme un papier posé sur un autre. */
  --shadow-card-night: 22px 22px 0 rgba(184, 50, 79, 0.14);
  --shadow-card-day: 22px 22px 0 rgba(125, 143, 71, 0.16);
  --shadow-press: 0 0 0 rgba(0,0,0,0);

  /* Mouvement — le mouvement révèle, il ne décore pas */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-reveal: 520ms; /* @kind other */
}