/* =========================================================================
   DESIGN TOKENS — extraits du design system de référence (fellous-mirror)
   Restitution neutre et réutilisable. Aucun contenu ni élément de marque
   de la source : uniquement des valeurs de design (couleurs, type, espaces).
   Source technique : Tailwind CSS v4 + Next.js. Animations : Framer Motion
   (réimplémentées en vanilla — voir styles/animations.css & js/reveal.js).
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     1. COULEURS
     Palette « warm luxury » : taupe/moka (primary), cuivre (accent),
     crème (fond clair), charbon (fond sombre / texte).
     --------------------------------------------------------------------- */

  /* Échelle primaire (taupe / moka) */
  --color-primary-50:  #faf7f4;
  --color-primary-100: #f0e8e3;
  --color-primary-200: #e2d4cc;
  --color-primary-300: #d4c4ba;
  --color-primary-400: #c4aea1;
  --color-primary-500: #b6988a;
  --color-primary-600: #9a7d6f;
  --color-primary-700: #7e6458;
  --color-primary-800: #624d44;
  --color-primary-900: #4a3933;

  /* Accent & neutres chauds */
  --color-copper:         #c4956a;  /* accent doré/cuivré */
  --color-cream:          #faf7f4;  /* fond clair chaleureux */
  --color-charcoal:       #2c2420;  /* fond sombre / texte fort */
  --color-charcoal-light: #4a3f3a;  /* texte secondaire sur clair */
  --color-overlay:        rgba(44, 36, 32, .55); /* voile sur média (hero) */

  /* Sémantiques */
  --color-success: #7ba686;
  --color-error:   #c47070;

  /* Base */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Rôles (aliasing sémantique — à utiliser dans les composants) */
  --bg:            var(--color-white);
  --bg-soft:       var(--color-cream);
  --bg-invert:     var(--color-charcoal);
  --surface:       var(--color-white);
  --text:          var(--color-charcoal);
  --text-muted:    var(--color-charcoal-light);
  --text-on-dark:  var(--color-cream);
  --accent:        var(--color-copper);
  --brand:         var(--color-primary-500);
  --border:        var(--color-primary-200);

  /* Dégradés utilitaires */
  --grad-warm:  linear-gradient(135deg, var(--color-primary-400), var(--color-copper));
  --grad-dark:  linear-gradient(160deg, var(--color-charcoal), #1c1714);

  /* ---------------------------------------------------------------------
     2. TYPOGRAPHIE
     Display : Playfair Display (serif) — titres.
     Sans    : Poppins — corps & UI.
     (Polices libres OFL ; à auto-héberger en woff2 pour éviter tout CDN.)
     --------------------------------------------------------------------- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Échelle de tailles (rem) — reprise fidèle de l'échelle source */
  --text-xs:   0.75rem;    --lh-xs:   1rem;
  --text-sm:   0.875rem;   --lh-sm:   1.25rem;
  --text-base: 1rem;       --lh-base: 1.5rem;
  --text-lg:   1.125rem;   --lh-lg:   1.75rem;
  --text-xl:   1.25rem;    --lh-xl:   1.75rem;
  --text-2xl:  1.5rem;     --lh-2xl:  2rem;
  --text-3xl:  1.875rem;   --lh-3xl:  2.25rem;
  --text-4xl:  2.25rem;    --lh-4xl:  2.5rem;
  --text-5xl:  3rem;       --lh-5xl:  1.1;
  --text-6xl:  3.75rem;    --lh-6xl:  1.05;

  /* Graisses */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold:800;

  /* Interlignage & interlettrage */
  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --tracking-tight: -0.02em;
  --tracking-wide:   0.08em;  /* petites capitales / eyebrows */

  /* ---------------------------------------------------------------------
     3. ESPACEMENT
     Unité de base 0.25rem (4px). Échelle multiple de l'unité.
     --------------------------------------------------------------------- */
  --spacing: 0.25rem;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;   /* rythme vertical de section (py-20) */
  --space-24: 6rem;
  --space-28: 7rem;   /* rythme de section en grand écran (lg:py-28) */

  /* Rythme de section prêt à l'emploi */
  --section-py: var(--space-20);
  --section-py-lg: var(--space-28);

  /* ---------------------------------------------------------------------
     4. CONTENEUR & POINTS DE RUPTURE
     --------------------------------------------------------------------- */
  --container: 80rem;          /* largeur max de contenu (~1280px) */
  --container-narrow: 48rem;   /* prose / colonnes de texte */
  --container-pad: 1.5rem;     /* gouttière latérale */

  --bp-sm: 40rem;
  --bp-md: 48rem;
  --bp-lg: 64rem;
  --bp-xl: 80rem;
  --bp-2xl: 96rem;

  /* ---------------------------------------------------------------------
     5. RAYONS
     --------------------------------------------------------------------- */
  --radius-sm:  0.25rem;
  --radius-md:  0.375rem;
  --radius-lg:  0.5rem;
  --radius-xl:  0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;

  /* ---------------------------------------------------------------------
     6. OMBRES (teintées chaud, base charbon)
     --------------------------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(44, 36, 32, .06);
  --shadow:     0 1px 3px rgba(44, 36, 32, .10), 0 1px 2px -1px rgba(44, 36, 32, .10);
  --shadow-md:  0 4px 6px -1px rgba(44, 36, 32, .10), 0 2px 4px -2px rgba(44, 36, 32, .10);
  --shadow-lg:  0 10px 15px -3px rgba(44, 36, 32, .12), 0 4px 6px -4px rgba(44, 36, 32, .10);
  --shadow-xl:  0 20px 25px -5px rgba(44, 36, 32, .14), 0 8px 10px -6px rgba(44, 36, 32, .10);
  --shadow-2xl: 0 25px 50px -12px rgba(44, 36, 32, .28);

  /* ---------------------------------------------------------------------
     7. MOUVEMENT (transitions, durées, courbes)
     --------------------------------------------------------------------- */
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   600ms;
  --duration-slower: 800ms;

  --ease-standard: cubic-bezier(.4, 0, .2, 1);   /* défaut / smooth */
  --ease-smooth:   cubic-bezier(.4, 0, .2, 1);
  --ease-bounce:   cubic-bezier(.34, 1.56, .64, 1); /* léger dépassement */

  --transition-base: all var(--duration-base) var(--ease-standard);
  --transition-color: color var(--duration-fast) var(--ease-standard),
                      background-color var(--duration-fast) var(--ease-standard),
                      border-color var(--duration-fast) var(--ease-standard);

  /* ---------------------------------------------------------------------
     8. DIVERS
     --------------------------------------------------------------------- */
  --backdrop-blur: 12px;        /* éléments « verre » (backdrop-blur) */
  --overlay-blur: 8px;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --hero-height: 85vh;          /* hero mobile */
  --hero-height-lg: 100vh;      /* hero écran plein en desktop */
}