/* Jaque's Private Chef · design tokens (V8: V7 structure in the V6 look)
   Layout concept: alternating bands of forest green and warm cream,
   like courses on a long table. One accent, two tones of it:
   sand on green, dark sand on cream. Never sand on cream (1.97:1). */

@font-face { font-family: "Marcellus"; src: url("../fonts/marcellus-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mulish"; src: url("../fonts/mulish-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mulish"; src: url("../fonts/mulish-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Mulish"; src: url("../fonts/mulish-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Mulish"; src: url("../fonts/mulish-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;

  /* Colour palette */
  --green: #001B06;        /* ground of dark bands, text on cream   15.6:1 */
  --green-2: #0B2A12;      /* raised surface on green                       */
  --cream: #F2EDE9;        /* ground of light bands                         */
  --cream-2: #E8E1DA;      /* raised surface on cream                       */
  --sand: #C1A78D;         /* accent, ONLY on green                  7.9:1  */
  --sand-dark: #6B563E;    /* accent, ONLY on cream                  6.0:1  */
  --grey-on-green: #ABB0AD;/* secondary text on green                8.2:1  */
  --grey-on-cream: #4F5751;/* secondary text on cream                6.4:1  */

  /* Lines, overlays and shadows (derived from the palette) */
  --line-on-cream: rgba(193, 167, 141, 0.30);  /* V6: sand hairlines on both grounds */
  --line-on-green: rgba(193, 167, 141, 0.30);
  --line-header: rgba(193, 167, 141, 0.30);
  --line-field: #6B563E;
  --hatch: #0E1A10 repeating-linear-gradient(-45deg, rgba(193, 167, 141, 0.16) 0 1px, transparent 1px 12px); /* image placeholder while loading */
  --line-lightbox: rgba(242, 237, 233, 0.40);
  --ring-focus: rgba(107, 86, 62, 0.25);
  --backdrop: rgba(0, 12, 3, 0.90);
  --shadow-float: 0 6px 20px rgba(0, 27, 6, 0.25);

  /* Type */
  --font-display: "Marcellus", "Cormorant Garamond", Georgia, serif;
  --font-body: "Mulish", "Helvetica Neue", Arial, sans-serif;
  --fs-2xs: 0.6875rem;   /* 11px eyebrows */
  --fs-xs: 0.75rem;     /* 12px buttons, links, nav */
  --fs-s: 0.9375rem;
  --fs-m: 1rem;
  --fs-l: 1.25rem;
  --fs-lead: 1.0625rem;
  --fs-xl: clamp(1.375rem, 2.8vw, 2.25rem);
  --fs-2xl: clamp(1.625rem, 3.2vw, 2.75rem);   /* 26–44px, V6 h2 */
  --fs-3xl: clamp(1.875rem, 4.4vw, 3.75rem);   /* 30–60px, V6 h1 */
  --lh-body: 1.7;
  --lh-tight: 1.15;
  --track-label: 2px;
  --track-display: 3px;

  /* Spacing, 4px base */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --section: clamp(5rem, 10vw, 8.75rem);         /* 80–140px */
  --section-s: clamp(4rem, 8vw, 6.25rem);

  /* Layout */
  --container: 75rem;      /* 1200px content */
  --container-header: 87.5rem; /* 1400px */
  --container-text: 42rem;
  --measure-s: 30rem;      /* short intro next to an image  */
  --measure: 40rem;        /* lead paragraphs, boxes        */
  --measure-l: 44rem;      /* section heads, answers        */
  --measure-xl: 52rem;     /* statements, page heads, FAQ   */
  --gutter: clamp(1rem, 4vw, 3rem);
  --header-h: 5rem;
  --hero-inset: clamp(2.5rem, 6vw, 6rem); /* side margin of the hero text; the header bar uses the same on desktop */
  --control-h: 3.25rem;    /* buttons                        */
  --tap: 2.75rem;          /* minimum touch target, 44px     */
  /* Breakpoints (fixed, CSS cannot read variables in media queries): 560px phone, 760px small tablet, 960px tablet and navigation switch */

  /* Shape and motion */
  --radius: 2px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-press: 160ms;
  --dur-ui: 220ms;
  --dur-reveal: 700ms;
}