/* ============================================================
   Chloé Grégoire — Sage-Femme
   Colors & Typography tokens
   ============================================================
   Visual direction : cocon chaleureux et sécurisant.
   Inspiration : Hauméa Toulouse (maison de la périnatalité) —
   palette de terres douces, eucalyptus cendré, sable chaud,
   crème et prune. Typographie ronde, apaisée, féminine.
   Pastel mais ancré — jamais bonbon, jamais clinique.
   ============================================================ */

/* ---------- Webfonts ---------- */
/* Quicksand — rounded geometric sans, for display/headings.
   Soft round terminals, calm, contemporary. */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
/* Figtree — warm rounded sans for body copy. Friendly open apertures,
   distinct from Quicksand while remaining cohesive. */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700&display=swap');
/* Cormorant Garamond — very soft serif, italic-only, for expressive pullquotes
   (in the Hauméa tradition of editorial italic citations). */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,300;1,400;1,500&display=swap');

:root {
  /* ============================================================
     COLOR SYSTEM
     ============================================================ */

  /* ---- Primary : Vert doux (Menthe sauge) ----
     La couleur signature. Fraîche, pastel, botanique — féminine et apaisante.
     Un vert désaturé, loin du flashy : pense feuilles de menthe séchées,
     céramique mate, linge lavé en vert cendré. */
  --terra-50:  #EDF5ED;
  --terra-100: #D2E8D1;
  --terra-200: #AECFAC;
  --terra-300: #85B082;
  --terra-400: #5E9159;   /* primaire */
  --terra-500: #447041;   /* hover / texte sur clair */
  --terra-600: #2F5230;   /* pressé */

  /* ---- Secondary : Eucalyptus cendré ----
     Un vert-gris apaisant, botanique, plus froid que la sauge pure.
     Rappelle les feuillages cendrés et le lin lavé. */
  --eucalyptus-50:  #EEF1EC;
  --eucalyptus-100: #DCE3D7;
  --eucalyptus-200: #BDC9B5;
  --eucalyptus-300: #9BAD92;
  --eucalyptus-400: #7B9072;   /* secondaire */
  --eucalyptus-500: #5E7358;
  --eucalyptus-600: #445440;

  /* ---- Tertiary : Sable doré (Ocre miel) ----
     Accent chaud et lumineux pour les moments de célébration
     (témoignages, seaux, prix, confirmation de rendez-vous). */
  --sand-50:  #FAF4E8;
  --sand-100: #F2E5CC;
  --sand-200: #E7D2A5;
  --sand-300: #D6B875;
  --sand-400: #BF9B4E;   /* tertiaire */
  --sand-500: #9A7B36;

  /* ---- Neutrals : Ivoire & Prune ----
     Crème ivoire (légèrement plus froid que du lin pur), et
     prune profonde pour le texte. */
  --ivory-50:  #FBF8F2;   /* fond de page */
  --ivory-100: #F5EFE4;   /* carte / surface */
  --ivory-200: #EBE3D2;   /* division douce */
  --ivory-300: #D9CDB5;   /* bordure subtile */
  --ivory-400: #B3A488;   /* neutre sourd */

  --plum-300: #8B7A7B;   /* fg tertiaire */
  --plum-500: #5A464A;   /* fg secondaire */
  --plum-700: #3A2A2E;   /* fg primaire */
  --plum-900: #241619;   /* fg fort */

  /* ---- Couleurs sémantiques (toutes sourdes, jamais criardes) ---- */
  --success: #6D8F5C;    /* vert eucalyptus-forward */
  --warning: #C98A3B;    /* ambre terre */
  --danger:  #B05545;    /* brique sourde */
  --info:    #7A8FA3;    /* bleu-gris doux */

  /* ---- Tokens sémantiques (utiliser ceux-ci dans les composants) ---- */
  --bg-page:       var(--ivory-50);
  --bg-surface:    #FFFFFF;
  --bg-surface-2:  var(--ivory-100);
  --bg-muted:      var(--ivory-200);
  --bg-tinted:     var(--terra-50);
  --bg-cocon:      var(--eucalyptus-50);   /* sections "cocon" apaisantes */

  --fg-primary:    var(--plum-700);
  --fg-secondary:  var(--plum-500);
  --fg-muted:      var(--plum-300);
  --fg-on-terra:   #FFFFFF;
  --fg-on-euca:    #FFFFFF;

  --border-subtle: var(--ivory-300);
  --border-strong: var(--plum-300);

  --accent:        var(--terra-400);
  --accent-hover:  var(--terra-500);
  --accent-soft:   var(--terra-100);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: 'Quicksand', 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Figtree', 'Segoe UI', system-ui, sans-serif;
  --font-quote:   'Cormorant Garamond', 'Georgia', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale — modeste, éditoriale. Base 17px. */
  --fs-xs:    13px;
  --fs-sm:    15px;
  --fs-base:  17px;
  --fs-lg:    19px;
  --fs-xl:    22px;
  --fs-2xl:   28px;
  --fs-3xl:   36px;
  --fs-4xl:   48px;
  --fs-5xl:   64px;
  --fs-6xl:   80px;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
  --lh-relaxed:1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.16em;

  /* ============================================================
     SPACING, RADII, SHADOWS
     ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Ombres tintées de prune — jamais noires, jamais dures. */
  --shadow-xs: 0 1px 2px rgba(58, 42, 46, 0.05);
  --shadow-sm: 0 2px 6px rgba(58, 42, 46, 0.06), 0 1px 2px rgba(58, 42, 46, 0.04);
  --shadow-md: 0 8px 24px rgba(58, 42, 46, 0.08), 0 2px 6px rgba(58, 42, 46, 0.05);
  --shadow-lg: 0 20px 48px rgba(58, 42, 46, 0.10), 0 4px 12px rgba(58, 42, 46, 0.06);
  --shadow-inset: inset 0 1px 2px rgba(58, 42, 46, 0.06);

  /* Motion — doux, rassurant, jamais rebondissant. */
  --ease-soft: cubic-bezier(0.32, 0.72, 0.36, 1);
  --dur-quick: 160ms;
  --dur-base:  240ms;
  --dur-slow:  420ms;
}

/* ============================================================
   SEMANTIC BASE STYLES
   ============================================================ */

html, body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-4xl), 6vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  color: var(--fg-primary);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: 500;
  color: var(--fg-primary);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--fg-primary);
}
h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--fg-primary);
}
h5, .h5 {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--fg-primary);
}

p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
  text-wrap: pretty;
  max-width: 62ch;
}

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

.lede {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
  font-weight: 400;
}

/* Citations éditoriales — italique Cormorant, à la manière d'Hauméa. */
.quote {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-primary);
  font-weight: 400;
}

small, .caption {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

a {
  color: var(--terra-500);
  text-decoration-color: var(--terra-200);
  text-underline-offset: 3px;
  transition: color var(--dur-quick) var(--ease-soft);
}
a:hover { color: var(--terra-600); }