/* ============================================================
   VARIABLES - Sefko Paysage
   DA imposee : PAY-13 Emeraude sombre / Architecture Cuivre
   Archivo (display) + Montserrat (body/ui)
   accent #1F5B4E (emeraude profond) / bg #EDF1ED (gris-vert tres clair)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  /* Couleurs base (skin PAY-13) */
  --bg:           #EDF1ED;
  --bg-alt:       #E2E8E2;
  --surface:      #F4F7F4;
  --surface-deep: #182921;
  --text:         #1E2E29;
  --text-2:       #4A5751;
  --text-mute:    #7A857F;
  --border:       rgba(30, 46, 41, 0.14);
  --border-strong:rgba(30, 46, 41, 0.32);

  /* Accents metier paysagiste : emeraude + secondaire cuivre patine doux */
  --accent:       #1F5B4E;
  --accent-2:     #2E7A66;
  --accent-soft:  #D4DED7;
  --accent-on-dark:#7BB39F;
  --primary:      #1F5B4E;
  --wa-green:     #25D366;

  /* Polices */
  --ff-display:   'Archivo', 'Helvetica Neue', system-ui, sans-serif;
  --ff-body:      'Montserrat', system-ui, -apple-system, sans-serif;
  --ff-ui:        'Montserrat', system-ui, -apple-system, sans-serif;

  /* Echelle typo fluide */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
  --fs-sm:   clamp(0.88rem, 0.85rem + 0.2vw, 0.95rem);
  --fs-base: clamp(1rem, 0.97rem + 0.18vw, 1.075rem);
  --fs-lg:   clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-xl:   clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --fs-2xl:  clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem);
  --fs-3xl:  clamp(2.8rem, 2rem + 4vw, 5rem);

  /* Espacement */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  /* Rayons */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;

  /* Container */
  --container: 1200px;
  --header-h: 72px;
  --header-h-mobile: 60px;

  /* Z-index (PIEGE PROD: header > menu, burger > header) */
  --z-fab:    900;
  --z-menu:   1000;
  --z-header: 1100;
  --z-burger: 1150;
  --z-modal:  1200;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  280ms;
}
