/*
  Design tokens — valeurs exactes extraites du fichier Figma "mi-portfolio"
  (node 0:1, pages HOME_PORTFOLIO / WHOIAM / LIBRARY). Une seule langue, pas
  de mode sombre : ces éléments ne figurent pas dans la maquette.
*/

:root {
  /* Couleurs */
  --color-bg: #FFFFFF;
  --color-bg-muted: #FAFAF9;
  --color-headline: #1B0700;      /* "c'est Amad Louis", "Mes lectures" */
  --color-heading: #302521;       /* "Mes projets", labels de sous-section */
  --color-body: #484848;          /* paragraphes longs */
  --color-meta: #4D4D4D;          /* "B2B ⚡ Assurances" */
  --color-accent: #F26430;        /* grandes surfaces / décoratif (numéros, icônes) */
  --color-accent-text: #B8460F;   /* accent assombri — texte, liens (AA : 5.4:1 blanc, 4.7:1 crème) */
  --color-placeholder: #D9D9D9;   /* images de projet en attente */

  --color-portrait-card: #1B0700; /* carte décalée derrière les portraits */

  --color-contact-bg: #211A18;
  --color-contact-heading: #FFEDE6;
  --color-pill-bg: #FFEDE6;
  --color-pill-border: #FFD0BF;

  --color-btn-bg: #302521;
  --color-btn-text: #D9D9D9;

  --color-footer-accent: #443732;
  --color-footer-note: #575757;

  /* Typographie */
  --font-display: "Bebas Neue", Impact, sans-serif;
  --font-accent: "Alegreya", Georgia, serif;
  --font-body: "Satoshi", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Échelle (valeurs Figma en desktop, fluides en dessous) */
  --step-body: clamp(1.05rem, 0.95rem + 0.4vw, 1.5rem);       /* 24px */
  --step-ui: 1rem;                                             /* 16px */
  --step-copyright: clamp(0.9rem, 0.85rem + 0.2vw, 1.25rem);   /* 20px */
  --step-md: clamp(1.4rem, 1.2rem + 0.9vw, 2rem);              /* 32px */
  --step-lg: clamp(1.9rem, 1.5rem + 1.8vw, 2.5rem);            /* 40px */
  --step-xl: clamp(2.4rem, 1.8rem + 2.8vw, 4rem);              /* 64px */
  --step-huge: clamp(2.75rem, 1.9rem + 3.9vw, 5rem);           /* 80px */

  --tracking-display: -0.03em;
  --tracking-accent: -0.045em;
  --tracking-body: -0.03em;

  --leading-tight: 1.0;
  --leading-snug: 1.3;
  --leading-body: 1.45;

  --measure: 60ch;

  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6.5rem;

  --container-max: 72.5rem; /* 1128px contenu + marges, proche des 1119px de la maquette */

  --duration-fast: 180ms;
  --duration-base: 380ms;
  --duration-reveal: 650ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-reveal: 0ms;
  }
}