/*
 * Charte Maison Gourmet : traduction exacte de DESIGN.md (validé par Chris
 * le 2026-09-28). Toute couleur, taille, espacement ou rayon du site passe
 * par ces variables. Modifier DESIGN.md d'abord, puis ce fichier.
 */

:root {
  /* Couleurs (DESIGN.md, frontmatter « colors ») */
  --color-cream: #F9F4ED;
  --color-paper: #FDFBF7;
  --color-wheat: #F3E8D2;
  --color-rule: #D9CFBC;
  --color-field-border: #8F8773;
  --color-ink: #26261E;
  --color-ink-muted: #5E5A4B;
  --color-olive: #4F5738;
  --color-olive-deep: #3E452B;
  --color-olive-leaf: #727855;
  --color-error: #9B3A22;
  --color-night: #2A2A21;
  --color-night-ink: #EDE6D8;
  --color-night-muted: #B8B09C;
  --color-night-rule: #46453A;
  --color-night-focus: #E8D9A8;
  --color-map-land: #ECE4D3;
  --color-map-origin: #DCDBBF;
  /* Halos des sections alternées de l'accueil (lumières de fond, jamais un accent). */
  --color-halo-gold: #F4DDB0;
  --color-halo-sage: #DADCC6;

  /* Rôles */
  --color-bg: var(--color-cream);
  --color-surface: var(--color-paper);
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink-muted);
  --color-accent: var(--color-olive);
  --color-accent-strong: var(--color-olive-deep);
  --color-focus: var(--color-olive);

  /* Typographie (DESIGN.md, « typography ») */
  --font-display: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --font-body: "Source Sans 3", "Source Sans Fallback", system-ui, sans-serif;

  --text-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --leading-display: 1.06;
  --tracking-display: -0.02em;
  --weight-display: 420;

  /* h1 du hero de l'accueil, dès 1100 px */
  --text-display-hero: clamp(2.75rem, 1rem + 4.4vw, 5.25rem);
  --leading-display-hero: 1.02;
  --tracking-display-hero: -0.025em;

  --text-headline: clamp(1.875rem, 1.4rem + 1.9vw, 2.875rem);
  --leading-headline: 1.12;
  --tracking-headline: -0.015em;
  --weight-headline: 420;

  --text-subhead: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  --leading-subhead: 1.2;

  --text-title: 1.375rem;
  --leading-title: 1.25;
  --weight-title: 480;

  --text-subtitle: 1.1875rem;
  --weight-subtitle: 560;

  --text-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --leading-lead: 1.5;

  --text-body: 1.0625rem;
  --leading-body: 1.6;

  --text-label: 0.8125rem;
  --leading-label: 1.3;
  --tracking-label: 0.12em;
  --weight-label: 600;

  --text-small: 0.9375rem;
  --leading-small: 1.5;

  --measure: 68ch;
  --measure-lead: 60ch;

  /* Espacements (DESIGN.md, « spacing ») */
  --space-2xs: 0.25rem;  /* 4px */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --space-4xl: 6rem;     /* 96px */
  --space-5xl: 8rem;     /* 128px */

  /* Rayons (DESIGN.md, « rounded ») */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 9999px;

  /* Mise en page (DESIGN.md, « Layout ») */
  --container: 75rem;                                /* 1200px */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);             /* 20 à 40px */
  --section-space: clamp(4rem, 5vw + 2.5rem, 8rem);  /* 64 à 128px */
  --header-height: 7rem;                             /* 112px */
  --header-height-compact: 4rem;                     /* 64px */
  /* Espace sous le menu en haut des pages (acheteurs, producteurs, contact,
     pages légales) : 48 px sur téléphone, jusqu'à 72 px sur grand écran, comme
     l'accueil dont le texte descend de 48 à 70 px (Chris, 2026-10-01). */
  --page-top: clamp(var(--space-2xl), 2.5vw + 1.4rem, 4.5rem);

  /* Composants (DESIGN.md, « components ») */
  --button-height: 3rem;                             /* 48px */
  --button-padding: 0.875rem 1.5rem;                 /* 14px 24px */
  --input-height: 3rem;
  --input-padding: 0.75rem 0.875rem;                 /* 12px 14px */

  /* Profondeur (DESIGN.md, « Elevation & Depth ») */
  --shadow-print: 0 18px 32px -18px rgba(38, 38, 30, 0.45), 0 2px 5px rgba(38, 38, 30, 0.1); /* tirages : portrait, produits */
  --shadow-bubble: 0 10px 24px -10px rgba(38, 38, 30, 0.45);
  --rule-width: 1px;

  /* Focus */
  --focus-width: 2px;
  --focus-offset: 3px;

  /* Mouvement */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 240ms;
}