/* NextWeb theme — Brasserie Le Hublot (microbrasserie, Chambly).
   Direction: "carnet de bord d'un port" — papier de carte marine vieilli,
   coque de bateau bleu-marine, laiton d'un hublot. 3 couleurs, voix luxe.
   MACHINE CONVENTION: colors are literal, contrast pairs are --x / --on-x,
   all other files use ONLY these tokens (max one var() hop). */

@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/playfair-display-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/playfair-display-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("assets/fonts/source-sans-3-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("assets/fonts/source-sans-3-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* palette — 3 couleurs (crème neutre · marine · laiton), pairs --x / --on-x */
  --surface:          hsl(39 34% 94%);   /* papier-crème, carte marine       */
  --on-surface:       hsl(205 45% 13%);  /* encre coque marine               */
  --surface-alt:      hsl(38 28% 89%);   /* crème plus profond, bandes       */
  --on-surface-alt:   hsl(205 45% 13%);
  --surface-dark:     hsl(205 47% 12%);  /* nuit sur le bassin — héro/sombre */
  --on-surface-dark:  hsl(39 36% 93%);
  --brand:            hsl(205 50% 20%);  /* bleu de coque                    */
  --on-brand:         hsl(39 38% 95%);
  --accent:           hsl(36 74% 52%);   /* laiton / ambre de la bière       */
  --on-accent:        hsl(205 47% 12%);
  --muted:            hsl(205 18% 38%);  /* texte secondaire SUR --surface   */
  --muted-dark:       hsl(39 22% 76%);   /* texte secondaire SUR --surface-dark */
  --line:             hsl(205 30% 20% / 0.14);   /* filet sur clair          */
  --line-dark:        hsl(39 30% 90% / 0.16);     /* filet sur sombre        */

  /* type — display serif Playfair + corps Source Sans */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", system-ui, -apple-system, sans-serif;
  --text-sm:   clamp(0.83rem, 0.8rem + 0.15vw, 0.94rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
  --text-lg:   clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --text-xl:   clamp(1.56rem, 1.4rem + 0.7vw, 2.1rem);
  --text-2xl:  clamp(1.95rem, 1.7rem + 1.1vw, 2.8rem);
  --text-hero: clamp(2.8rem, 2.1rem + 2.9vw, 4.6rem);
  --leading-body: 1.55;
  --leading-tight: 1.08;
  --tracking-kicker: 0.22em;

  /* spacing — 8pt scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;

  /* shape & depth */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px hsl(205 45% 8% / 0.10), 0 2px 8px hsl(205 45% 8% / 0.08);
  --shadow:    0 2px 6px hsl(205 45% 8% / 0.12), 0 18px 40px hsl(205 45% 8% / 0.18);

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --speed: 240ms;

  /* opacified variants for overlays */
  --surface-dark-muted:  hsl(205 47% 12% / 0.72);
  --surface-dark-subtle: hsl(205 47% 12% / 0.5);
  --brand-hover:         hsl(205 45% 20% / 0.4);
  --brand-subtle:        hsl(205 50% 20% / 0.08);   /* subtle hover on nav scrolled */
  --surface-veil:        hsl(39 34% 94% / 0.86);   /* nav-morph condensed backdrop */
}