/* ==========================================================================
   Canopée — design tokens
   Couleurs relevées sur le logo d'origine (assets/brand/source).
   ========================================================================== */

:root {
  /* Palette */
  --color-forest: #2e4a3c;
  --color-forest-deep: #22382d;
  --color-forest-night: #17261e;
  --color-ink: #0e1510;
  --color-ivory: #f5f2ea;
  --color-ivory-dim: #ece6d9;
  --color-sand: #ddd3c0;
  --color-gold: #cdb685;
  --color-gold-deep: #a88b55;
  --color-sage: #9fae9f;

  --color-line-light: rgb(14 21 16 / 0.14);
  --color-line-dark: rgb(245 242 234 / 0.18);

  /* Typographie */
  --font-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --text-xs: 0.6875rem;   /* 11px — labels */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-md: 1.0625rem;   /* 17px */
  --text-lg: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  --text-xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
  --text-2xl: clamp(2.25rem, 1.5rem + 2.8vw, 4rem);
  --text-3xl: clamp(2.75rem, 1.6rem + 4.4vw, 5.75rem);

  --tracking-label: 0.32em;
  --tracking-wide: 0.18em;

  /* Espacements */
  --space-2xs: 0.375rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: clamp(3rem, 2rem + 3vw, 5rem);
  --space-xl: clamp(5rem, 3rem + 6vw, 9rem);
  --space-2xl: clamp(6.5rem, 4rem + 8vw, 12rem);

  --container: 1360px;
  --container-narrow: 920px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3.5rem);

  --header-height: 88px;

  /* Mouvement */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 240ms;
  --duration-base: 600ms;
  --duration-slow: 1200ms;

  /* Grain papier (repris de la texture du logo) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (max-width: 800px) {
  :root {
    --header-height: 68px;
  }
}