/* ============================================================
   MOLLEAU — Colors & Type Tokens
   Brand: Molleau — "Chaque goutte compte" (Every drop counts)
   Source: Brand manual (MOLLEAU - BRAND MANUAL Charte graphique)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=Caveat:wght@400;500;600;700&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Primary — the Molleau blue, used in the logo */
  --molleau-blue:        #0E4F93;   /* Bleu Molleau — primary brand color */
  --molleau-blue-deep:   #093668;   /* Hover / pressed / dense backgrounds */
  --molleau-blue-soft:   #1E63AE;   /* Lighter shade for subtle accents */

  /* Complementary blues — water, freshness */
  --aqua:                #36B2FF;   /* Bright water-blue accent */
  --aqua-soft:           #58CACB;   /* Teal-cyan, social media accent */

  /* Secondary — warmth & contrast */
  --sun:                 #ECAA00;   /* Warm amber, used for emphasis / CTAs */

  /* Neutrals — derived from the manual's grey */
  --slate-200:           #E6EBF0;
  --slate-300:           #B1BFCF;   /* From brand manual */
  --slate-500:           #6B7C90;
  --slate-700:           #34465A;
  --slate-900:           #0E1B2C;

  /* Surface & ink */
  --paper:               #FFFFFF;
  --paper-soft:          #F6F9FC;   /* Page background tint */
  --ink:                 #0E1B2C;   /* Body text */
  --ink-soft:            #4A5A6E;   /* Secondary text */
  --ink-mute:            #8093A8;   /* Tertiary / captions */

  /* ---------- SEMANTIC ---------- */
  --bg:                  var(--paper);
  --bg-alt:              var(--paper-soft);
  --bg-invert:           var(--molleau-blue);

  --fg:                  var(--ink);
  --fg-soft:             var(--ink-soft);
  --fg-mute:             var(--ink-mute);
  --fg-invert:           var(--paper);

  --accent:              var(--molleau-blue);
  --accent-2:            var(--aqua);
  --accent-warm:         var(--sun);

  --border:              #DDE5EE;
  --border-soft:         #ECF1F6;

  --success:             #2BA66B;
  --warning:             var(--sun);
  --danger:              #D24545;
  --info:                var(--aqua);

  /* ---------- TYPE FAMILIES ---------- */
  /* Primary display: rounded sans matching the wordmark.
     Brand manual specified "Baguet Script" + Arial.
     SUBSTITUTION FLAGGED: Baguet is paid; using Nunito (rounded, geometric, high x-height) as nearest free match for the wordmark feel. */
  --font-display: "Nunito", "Quicksand", system-ui, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-tagline: "Inter", Arial, sans-serif;       /* uppercase, tracked, used for "CHAQUE GOUTTE COMPTE" */
  --font-script:  "Caveat", "Brush Script MT", cursive; /* substitute for any handwritten accent */

  /* ---------- TYPE SCALE ---------- */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   42px;
  --fs-4xl:   56px;
  --fs-5xl:   72px;
  --fs-6xl:   96px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-xwide:  0.22em;   /* tagline tracking */

  /* ---------- SPACING ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- RADII ---------- */
  /* Rounded language echoes the logo's circular forms. */
  --r-sm:    8px;
  --r-md:    14px;
  --r-lg:    20px;
  --r-xl:    28px;
  --r-2xl:   40px;
  --r-pill:  999px;
  --r-drop:  60% 60% 60% 60% / 65% 65% 55% 55%;  /* organic droplet */

  /* ---------- SHADOWS / ELEVATION ---------- */
  --shadow-1: 0 1px 2px rgba(14, 79, 147, 0.06), 0 2px 6px rgba(14, 79, 147, 0.04);
  --shadow-2: 0 4px 12px rgba(14, 79, 147, 0.08), 0 2px 4px rgba(14, 79, 147, 0.04);
  --shadow-3: 0 12px 32px rgba(14, 79, 147, 0.12), 0 4px 10px rgba(14, 79, 147, 0.05);
  --shadow-4: 0 24px 60px rgba(14, 79, 147, 0.18), 0 8px 16px rgba(14, 79, 147, 0.08);
  --shadow-inner: inset 0 1px 2px rgba(14, 27, 44, 0.06);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);     /* fluid, water-like */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   150ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;
}

/* ============================================================
   SEMANTIC TYPE STYLES
   ============================================================ */

.h-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--molleau-blue);
}

.h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.eyebrow {
  font-family: var(--font-tagline);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--accent);
}

.tagline {
  /* "CHAQUE GOUTTE COMPTE" style */
  font-family: var(--font-tagline);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--fg);
}

.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-soft);
  text-wrap: pretty;
}

.p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg);
  text-wrap: pretty;
}

.small {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-soft);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-mute);
}

.quote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: 1.3;
  color: var(--molleau-blue);
}