/*
 * MADS — jetons de design.
 *
 * Tout ce qui est susceptible de varier (couleur, échelle typographique,
 * gouttières, durées) est ici. Les feuilles suivantes ne référencent que ces
 * variables : changer la teinte du crème ou le rythme des animations se fait
 * en un seul endroit, y compris pour les web components (les variables CSS
 * traversent le shadow DOM, contrairement aux règles).
 */

:root {
  /* ---------------------------------------------------------- couleurs */

  /* Crème du hero, relevé sur les maquettes */
  --c-cream: #fff5e8;
  --c-white: #ffffff;
  /* Encre : ni noir pur ni gris, la teinte des SVG fournis */
  --c-ink: #1b1c1b;
  --c-ink-soft: #4a4a48;
  /* Gris des labels inactifs (« Page projet filtre actif ») */
  --c-muted: #b9b9b9;
  --c-rule: #d9d3c8;
  /* Panneau de menu */
  --c-panel: #262626;
  --c-panel-ink: #f4f0e9;

  /* Surfaces sémantiques — les pages internes sont blanches, le hero crème */
  --c-bg: var(--c-white);
  --c-fg: var(--c-ink);

  /* ------------------------------------------------------- typographie */

  --f-title: 'Gyst', 'Didot', 'Times New Roman', serif;
  --f-body: 'Poppins', -apple-system, 'Segoe UI', sans-serif;

  /* Échelle fluide : la borne basse vaut pour 360 px de large, la haute pour
     1440 px. clamp() évite d'empiler les media queries sur chaque taille. */
  --t-hero: clamp(3.5rem, 11vw, 9.25rem);      /* logo MADS du hero */
  --t-h1: clamp(2.25rem, 4.6vw, 4rem);         /* « Ceramic Art Fair » */
  --t-h2: clamp(1.75rem, 3vw, 2.5rem);         /* « L’équipe » */
  --t-h3: clamp(1.125rem, 1.5vw, 1.375rem);    /* sous-titres */
  --t-lead: clamp(1.1875rem, 1.75vw, 1.625rem); /* chapô du hero */
  --t-body: clamp(1rem, 1.2vw, 1.1875rem);
  /* --t-small reste au corps de l'interface — libellés de formulaire, pied de
     page, liens fléchés, légendes de tuiles. Les paragraphes de contenu qui
     l'utilisaient sont passés à --t-body : c'est cette confusion entre texte
     secondaire et texte de lecture qui les faisait paraître trop petits. */
  --t-small: 0.9375rem;
  --t-tiny: 0.8125rem;

  --lh-tight: 1.06;
  --lh-title: 1.14;
  --lh-body: 1.62;

  /* --------------------------------------------------------- géométrie */

  /* Marge latérale : 48 px au large, 20 px sur mobile */
  --gutter: clamp(1.25rem, 3.35vw, 3rem);
  --gap: clamp(1rem, 1.6vw, 1.5rem);
  --col-gap: clamp(1.5rem, 4vw, 4.5rem);

  /* Rythme vertical des sections */
  --section-y: clamp(3.5rem, 8vw, 8rem);

  --radius-label: 7px;

  /* Hauteur d'écran fiable sur mobile : dvh suit la barre d'adresse
     rétractable, là où vh provoque un saut de mise en page au scroll. */
  --vh: 100dvh;

  /* -------------------------------------------------------- animations */

  --e-out: cubic-bezier(0.22, 1, 0.36, 1);     /* sorties amples */
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 220ms;
  --d-base: 420ms;
  --d-slow: 720ms;
  /* Ouverture / fermeture du menu en clip-path circulaire */
  --d-menu: 620ms;

  --z-menu: 100;
  --z-menu-button: 110;
  --z-header: 90;
}

/* Fond crème pour les pages dont le premier écran est un hero */
body.page-home {
  --c-bg: var(--c-cream);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 1ms;
    --d-base: 1ms;
    --d-slow: 1ms;
    --d-menu: 1ms;
  }
}