/* =============================================================================
   Charte de Momashop Concept : les tokens.
   Les noms des rôles reprennent le contrat de tokens du design system EasySaaS
   (color-ink, color-ground, color-primary…), pour qu'une future version en
   Tailwind ou en React se branche sans renommer. Les teintes propres à la marque
   sont préfixées --ms-. Détail et usage : docs/charte.md.
   ============================================================================= */
:root {
  /* Teintes de la marque, relevées dans la boutique */
  --ms-papier: #FBF3EE;     /* fond : le papier de l'invitation */
  --ms-dragee: #EFCAD3;     /* rose de la façade */
  --ms-comptoir: #D9A3B0;   /* rose du comptoir et des niches */
  --ms-framboise: #963F51;  /* encre des titres, liens, boutons */
  --ms-prune: #3E2230;      /* texte courant */
  --ms-or: #B08A55;         /* lettrage doré : ornements seulement, jamais du texte */
  --ms-voile: #F6E6E4;      /* fonds d'encadrés */

  /* Rôles du contrat */
  --color-ground: var(--ms-papier);
  --color-ink: var(--ms-prune);
  --color-ink-2: #6E4B5A;
  --color-line: #E8D2D1;
  --color-line-strong: #C9929F;
  --color-overlay: rgba(62, 34, 48, 0.62);
  --color-hover: var(--ms-voile);
  --color-primary: var(--ms-framboise);
  --color-primary-hover: #7E3243;
  --color-primary-soft: var(--ms-voile);
  --color-on-primary: var(--ms-papier);
  --color-accent: var(--ms-framboise);
  --color-accent-soft: var(--ms-dragee);
  --color-danger: #A1262B;
  --color-danger-soft: #FBE3E1;
  --color-placeholder: #9A7C88;

  /* Polices (auto-hébergées, voir fonts.css) */
  --font-script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  --font-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --font-sans: "EB Garamond", Garamond, Georgia, serif; /* texte courant (rôle « font-sans » du contrat) */
  --font-info: "Jost", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* Échelle typographique : texte courant 18 px sur téléphone */
  --text-xs: 0.78rem;
  --text-s: 0.95rem;
  --text-m: 1.125rem;
  --text-l: 1.4rem;
  --text-xl: clamp(2.1rem, 7.5vw, 3.3rem);
  --text-xxl: clamp(2.6rem, 10.5vw, 5rem);

  /* Formes */
  --radius-control: 999px;
  --radius-card: 6px;
  --radius-sheet: 22px;

  /* Espacements */
  --gouttiere: max(18px, env(safe-area-inset-left, 0px));
  --gouttiere-d: max(18px, env(safe-area-inset-right, 0px));
  --section: clamp(72px, 12vw, 136px);
}