/* ==========================================================================
   Tokens — valeurs reprises des variables Figma (fichier « Branding »).
   Modifier une valeur ici la répercute sur tout le site.
   ========================================================================== */
:root {
  /* Couleurs */
  --color-black: #151515;      /* colors/black */
  --color-text: #2f2f2f;       /* paragraphes des pages projet, plus doux que le noir (choix de Louise, 01/11/2026) */
  --color-purple: #3900ab;     /* colors/purple — icônes, texte des tags */
  --color-lila: #ece4fd;       /* colors/lila — fond des tags */
  --color-grey: #979797;       /* gris des intitulés de section */
  --color-bg: #ffffff;
  --color-placeholder: #f2f2f2; /* fond affiché pendant le chargement d'une image */
  --color-border: #cdcdcd;     /* bordure du menu de langue (comme Pinterest) */

  /* Espacements (sp/…) */
  --sp-2xs: 8px;
  --sp-xs: 16px;
  --sp-s: 24px;
  --sp-m: 32px;
  --sp-l: 48px;

  /* Police unique */
  --font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Typographie — mobile par défaut (Mobile/…) */
  --text-name: 600 24px/1 var(--font);         /* Mobile/H2 */
  --text-name-ls: -1px;
  --text-role: 400 20px/1 var(--font);         /* Mobile/H3 */
  --text-role-ls: -1px;
  --text-body: 400 14px/1.4 var(--font);       /* Mobile/Body S */
  --text-caption: 400 14px/1.3 var(--font);    /* légendes des épingles (14px comme Pinterest) */
  --text-tag: 400 14px/1 var(--font);          /* Tags (14px, choix de Louise le 26/10/2026) */

}

@media (min-width: 1024px) {
  :root {
    --text-name: 600 32px/1 var(--font);       /* Laptop/H1 (Semi-bold, choix de Louise le 6/10/2026) */
    --text-name-ls: -1px;
    --text-role: 400 24px/1.1 var(--font);     /* Laptop/H2 */
    --text-role-ls: -0.7px;
    --text-body: 400 16px/1.3 var(--font);     /* Laptop/Body L */
  }
}