/* La Main Tendue du Melda — DA PAY-5 Terre & feuille (Craft)
   Vivian / Benjamin Fouche — Troyes
   Palette OKLCH chaude artisan : vert sauge mousse + brun bois noisette sur creme. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

:root {
  /* --- Skin imposee PAY-5 Terre & feuille ------------------------------- */
  --bg:           oklch(95% 0.018 88);          /* #F6F0E6 creme chaud */
  --bg-alt:       oklch(92% 0.022 86);          /* parchemin un poil plus dense */
  --surface:      oklch(97% 0.012 86);          /* papier fond carte */
  --surface-deep: oklch(28% 0.030 80);          /* brun encre profond */

  --text:         oklch(24% 0.022 60);          /* #2E2820 brun encre */
  --text-2:       oklch(38% 0.020 70);          /* texte secondaire (sur clair) */
  --text-mute:    oklch(54% 0.018 78);          /* meta, dates */
  --text-inverse: oklch(96% 0.012 85);          /* texte sur fond fonce */

  --primary:      oklch(24% 0.022 60);          /* encre */
  --accent:       oklch(50% 0.075 140);         /* #557544 vert sauge mousse */
  --accent-deep:  oklch(38% 0.065 142);         /* vert mousse fonce */
  --accent-soft:  oklch(88% 0.040 138);         /* sauge clair tres pale */
  --accent-2:     oklch(58% 0.080 70);          /* #9A7B4F brun bois noisette */
  --accent-2-soft:oklch(86% 0.040 75);          /* brun clair */

  --border:       color-mix(in srgb, var(--text) 16%, transparent);
  --border-strong:color-mix(in srgb, var(--text) 32%, transparent);

  --wa-green:     #25D366;
  --wa-deep:      #128C7E;

  /* --- Typo PAY-5 --------------------------------------------------------- */
  --ff-display:   'Fraunces', Georgia, 'Times New Roman', serif;
  --ff-body:      'Source Sans 3', system-ui, -apple-system, sans-serif;
  --ff-ui:        'Source Sans 3', system-ui, sans-serif;

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

  /* --- Layout / z ------------------------------------------------------- */
  --header-h:        72px;
  --header-h-mobile: 64px;
  --container:       1200px;

  --z-header: 1100;
  --z-menu:   1000;
  --z-burger: 1120; /* > header > menu : pattern preventif */
  --z-modal:  1300;
  --z-fab:    900;
}

@media (prefers-color-scheme: light) { :root { color-scheme: light; } }