/* Variables globales — modifier ici pour changer tout le site */
:root {
  /* Couleurs */
  --color-primary: #BFA58D;     /* Beige doré — accent principal */
  --color-secondary: #DBD6C9;   /* Beige clair — fonds, bordures */
  --color-black: #111111;       /* Noir texte */
  --color-white: #FEFEFE;       /* Blanc fond */

  /* Aliases sémantiques */
  --color-bg: var(--color-white);
  --color-surface: var(--color-white);
  --color-text: var(--color-black);
  --color-text-muted: var(--color-primary);
  --color-border: var(--color-secondary);
  --color-accent: var(--color-primary);

  /* Typographie */
  --font-sans: 'Montserrat', sans-serif;

  /* Tailles de police */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.25rem;    /* 20px */
  --text-xl: 1.5rem;     /* 24px */
  --text-2xl: 2rem;      /* 32px */
  --text-3xl: 3rem;      /* 48px */
  --text-4xl: 4rem;      /* 64px */

  /* Espacements */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2.5rem;    /* 40px */
  --space-xl: 4rem;      /* 64px */
  --space-2xl: 6rem;     /* 96px */

  /* Largeur max du contenu */
  --max-width: 1400px;
  --max-width-text: 720px;

  /* Dimensions fixes */
  --header-height: 200px;
  --filter-height: 48px;
  --grid-gap: 40px;

  /* Arrondis — logique cohérente sur tout le site */
  --radius-sm: 150px;   /* cartes, inputs */
  --radius-md: 10px;   /* dropdown, surfaces */
  --radius-pill: 10px; /* boutons filtres, tags */

  /* Transitions */
  --transition: 0.25s ease;
  --transition-slow: 0.45s ease;
}