/* ============================================
 variables.css — Variables globales du projet
 ============================================ */

:root {
  /* Couleurs (uniquement cette palette) */
  --color-purple: #80004e;
  --color-black: #000000;
  --color-green: #bdc8b7;
  --color-ivory: #f7f6f1;
  --color-white: #ffffff;
  --color-burgundy-cta: #7a0046;
  --color-charcoal: #1c1c1c;
  --color-facebook: #1877f2;

  /* Section friperie — page À propos (voile violet sur photos) */
  --color-friperie-photo-overlay: color-mix(in srgb, var(--color-purple) 48%, transparent);
  --reviews-side-photo-overlay: color-mix(in srgb, var(--color-purple) 52%, transparent);

  /* Fond section émotions (photo + repli crème si chargement lent) */
  --silk-cream: #f5f0e6;
  --emotion-bg-image: url("/images/textures.jpg");

  /* Interactions */
  --hover-lift-sm: -0.125rem;
  --hover-lift-md: -0.25rem;
  --hover-scale-sm: 1.02;
  --hover-scale-md: 1.03;
  --hover-shadow-luxury: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.18);
  --hover-glow-gold: rgba(247, 216, 153, 0.28);

  /* Boutique — catalogue */
  --dark: var(--color-charcoal);
  --muted: rgba(28, 28, 28, 0.55);
  --tag-bg: rgba(28, 28, 28, 0.1);

  /* Boutique — filtres (details / summary) */
  --filtre-stack-gap: 1.2rem;
  --filtre-bar-gap: 1rem;
  --filtre-summary-gap: 1rem;
  --filtre-summary-pad-y: 0.65rem;
  --filtre-summary-pad-x: 1rem;
  --filtre-panel-pad-y: 0.75rem;
  --filtre-panel-pad-x: 1rem;
  --filtre-panel-pad-bottom: 1rem;
  --filtre-summary-gap-mobile: 0.5rem;
  --font-size-filtre-summary-mobile: 0.75rem;

  /* Transitions & ombres (partagées — pages home, layout, à propos) */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Espacements (pages éditoriales & composants) */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --max-width-content: 720px;
  --max-width-site: 1200px;

}