/* ==========================================================================
   GMZ AQUA — Design Tokens
   Nettoyage de vitres & panneaux solaires — Saint-Malo
   Identité neuve : bleu vif, fun, arrondi. Mobile-first, flat (ombres limitées).
   ========================================================================== */

:root {
  /* ---------- Couleurs de marque ---------- */
  --aqua-50:  #EAF8FE;
  --aqua-100: #C9EEFC;
  --aqua-200: #9CE2FA;
  --aqua-300: #5FD0F6;
  --aqua-400: #21C1F3;   /* Bleu signature */
  --aqua-500: #12A6D8;
  --aqua-600: #0B6B92;   /* Bleu profond (hover, ombres) */
  --aqua-700: #084F6E;

  --ink:      #1564E3;   /* Texte principal, CTA */
  --ink-soft: #3E5C93;   /* Texte secondaire */
  --sky:      #DBF4FD;   /* Bleu clair — touches déco uniquement */
  --cream:    #FBF6EA;   /* Fond principal du site (crème rétro) */
  --cream-alt:#F3EBD8;   /* Fond des sections alternées */
  --white:    #FFFFFF;

  --pop-400:  #FFD23F;   /* Jaune accent */
  --pop-500:  #F5BE11;
  --pop-100:  #FFF1C4;

  --coral-400:#FF9D9D;   /* Touche chaude */
  --coral-100:#FFE2E2;

  /* ---------- Rôles sémantiques ---------- */
  --color-bg:            var(--cream);
  --color-surface:       var(--white);
  --color-surface-alt:   var(--aqua-50);
  --color-text:          var(--ink);
  --color-text-muted:    var(--ink-soft);
  --color-text-invert:   var(--white);
  --color-primary:       var(--aqua-400);
  --color-primary-strong:var(--aqua-600);
  --color-accent:        var(--pop-400);
  --color-cta:           var(--ink);
  --color-border:        rgba(21, 100, 227, 0.12);
  --color-border-strong: rgba(21, 100, 227, 0.22);
  --color-success:       #1FB57A;
  --color-danger:        #E2574C;
  --color-star:          var(--pop-400);

  /* ---------- Typographie ---------- */
  --font-display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.6rem, 6vw, 4.25rem); /* hero */
  --fs-h1:      clamp(2rem, 4.5vw, 3rem);
  --fs-h2:      clamp(1.6rem, 3.5vw, 2.25rem);
  --fs-h3:      1.4rem;
  --fs-h4:      1.15rem;
  --fs-lead:    1.2rem;   /* chapô */
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.75rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;

  --lh-tight:   1.05;
  --lh-snug:    1.25;
  --lh-body:    1.65;

  /* ---------- Espacements (échelle 4 / 8) ---------- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */

  /* ---------- Rayons (généreux, arrondi) ---------- */
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  34px;
  --radius-pill:999px;

  /* ---------- Ombres (flat : seulement boutons & cartes flottantes) ---------- */
  --shadow-none:   none;
  --shadow-button: 0 6px 0 0 var(--aqua-600);          /* effet "bloc" ludique */
  --shadow-button-pop: 0 6px 0 0 var(--pop-500);
  --shadow-card:   0 18px 40px -24px rgba(21, 100, 227, 0.45);

  /* ---------- Transitions ---------- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    140ms;
  --dur-base:    240ms;

  /* ---------- Layout ---------- */
  --container:   1140px;
  --container-narrow: 760px;
}