/* Variables CSS pour Elsi Studio */

:root {
  /* Couleurs principales */
  --color-primary: #084a3c;
  --color-primary-light: rgba(8, 74, 60, 0.51);
  --color-primary-hover: #094a3c12;
  --color-background: #f7faef;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-error: #e74c3c;
  --color-fallback-bg: #f0f0f0;

  /* Couleurs de sélection */
  --color-selection-bg: #ffea00;
  --color-selection-text: #084a3c;

  /* Opacités */
  --opacity-lightbox-bg: 0.9;
  --opacity-overlay: 0.5;
  --opacity-overlay-hover: 0.8;
  --opacity-hover: 0.7;

  /* Espacements */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 20px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 40px;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 30px;
  --radius-lg: var(--radius--lg, 12px);
  --radius-round: 50%;
  --radius-full: 100px;

  /* Transitions */
  --transition-fast: 0.3s ease;
  --transition-medium: 0.5s ease;
  --transition-slow: 0.8s ease;

  /* Tailles de police */
  --font-size-base: 1rem;
  --font-size-lg: 1.5rem;
  --font-size-icon-sm: 30px;
  --font-size-icon-md: 40px;

  /* Poids de police */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Famille de police */
  --font-family-base: Quicksand, sans-serif;
  --font-family-heading: var(--font-family-heading, 'Orelega One', cursive);

  /* Shadows */
  --shadow-lightbox: 0 0 30px rgba(0, 0, 0, 0.5);

  /* Z-index */
  --z-index-lightbox: 1000;
  --z-index-lightbox-controls: 1002;

  /* Gallery */
  --gallery-gap: 16px;
  --gallery-item-min: 250px;
  --gallery-mobile-item-width: 80vw;
  --gallery-mobile-item-max: 300px;

  /* Lightbox */
  --lightbox-button-size: 50px;
  --lightbox-close-size: 40px;
  --lightbox-max-width: 90%;
  --lightbox-max-height: 90vh;

  /* Breakpoints (pour référence dans les media queries) */
  /* Mobile: max-width: 479px */
  /* Tablet: 480px - 767px */
  /* Tablet-lg: 768px - 991px */
  /* Desktop: 992px - 1199px */
  /* Desktop-lg: min-width: 1200px */
}

/* Personnalisation de la sélection de texte */
::selection {
  background-color: var(--color-selection-bg);
  color: var(--color-selection-text);
}

/* WebKit browsers (Chrome, Safari, Edge) */
::-webkit-selection {
  background-color: var(--color-selection-bg);
  color: var(--color-selection-text);
}

/* Inversion des couleurs de sélection pour certaines sections */
/* Section "Mon savoir-faire sur place ou à emporter" (ID: #savoir-faire) */
#savoir-faire::selection,
#savoir-faire ::selection {
  background-color: #084a3c;
  color: #ffea00;
}

#savoir-faire ::-webkit-selection {
  background-color: #084a3c;
  color: #ffea00;
}

/* Section "Besoin d'un service de traiteur ?" (ID: #service-traiteur) */
#service-traiteur::selection,
#service-traiteur ::selection {
  background-color: #084a3c;
  color: #ffea00;
}

#service-traiteur ::-webkit-selection {
  background-color: #084a3c;
  color: #ffea00;
}