/* css/tokens.css — Frümee design tokens, from the client's charte graphique (février 2026):
     Blanc cassé #FEFBF4  the page, the breathing space                 (« couleur de fond & de respiration »)
     Vert sauge  #C9D6CF  the principal brand colour: bands, label boxes, panels, packaging-like surfaces. NEVER text.
     Noir profond #000000 text, titles, key information, calls to action (« couleur de contraste & de structure »)
   Iconography palette: sage, ivory, beige minéral, gris pierre clair; fruit accents (mangue, framboise, citron vert,
   raisin) only ponctual, never dominant. Type: Questrial (one weight, 400) for titles AND text; hierarchy comes from
   size, case and letter-spacing. Abramo (script) is reserved for identity: only the logo carries it (--font-script is
   the hook for the real file). Contrast ratios: WCAG 2.x relative luminance, computed. */

/* Abramo hook: when Frümee sends the font, drop the file in assets/fonts/ and uncomment (identity uses only: logo,
   signatures). Until then --font-script falls back to Questrial and nothing on the site depends on it.
@font-face { font-family: "Abramo"; src: url("../assets/fonts/abramo.woff2") format("woff2"); font-display: swap; }
*/

:root {
  /* ---------- the charter ---------- */
  --blanc-casse:   #FEFBF4;  /* page & breathing background */
  --sauge:         #C9D6CF;  /* principal brand colour. black on it 14.0:1 */
  --noir:          #000000;  /* 20.3:1 on blanc cassé */
  /* iconography palette (flat, outline icons; never a gradient, a drop shadow or 3D) */
  --ivoire:        #FFFDF8;
  --beige-mineral: #E8E0D2;
  --gris-pierre:   #D9D8D2;
  /* fruit accents: ponctual only (a dot, a badge), never a surface */
  --mangue:        #F0B43C;
  --framboise:     #A12A50;  /* 6.9:1 on blanc cassé: usable for a short accent text */
  --citron-vert:   #8DB33A;
  --raisin:        #6A3F78;

  /* ---------- the shop palette (what every v2 CSS file uses) ---------- */
  --field:        var(--blanc-casse); /* the page. ink 20.3:1, ink-2 8.4:1 */
  --field-hi:     #E6EAE3;            /* sage mist (sage 45 % into blanc cassé): card media, quick tiles, hovers. ink 17.2:1, ink-2 7.2:1 */
  --paper:        var(--blanc-casse); /* opaque surfaces: header, cards, sheet (a hairline separates them from the page) */
  --band:         var(--sauge);       /* brand bands: footer, closing bands, label boxes */
  --ink:          var(--noir);        /* text, CTA background */
  --ink-2:        #454D48;            /* secondary text (gris pierre, deep): 8.4:1 blanc cassé, 7.1:1 sage mist, 5.8:1 sage */
  --line:         rgb(0 0 0 / .13);   /* hairlines, decorative */
  --line-ui:      #6B736E;            /* borders of inputs / chips / quiet steppers: 4.7:1 blanc cassé, 4.0:1 sage mist, 3.3:1 sage */
  --cta-bg:       var(--noir);
  --cta-ink:      var(--blanc-casse); /* 20.3:1 */
  --cta-bg-hover: #2B302D;
  --badge-bg:     var(--sauge);       /* the count on the black « Commander »: sage pill, black figures 14.0:1 */
  --badge-ink:    var(--noir);
  --accent:       var(--framboise);   /* offer line, « soon » dot: 6.9:1 on blanc cassé */
  --band-ink:     var(--noir);        /* on sage 14.0:1 */
  --band-ink-2:   #3D4540;            /* on sage 6.6:1 */
  --focus-ring:   var(--noir);        /* 2px ring + 2px offset: 14:1 on sage, 20:1 on blanc cassé */
  --open-dot:     var(--citron-vert); /* « Ouvert » dot (decorative: the text says it) */
  --r-card: 0px;                      /* frames are architectural: square, hairline (the menu's boxes, the charter's strip) */
  --r-ctl: 999px;                     /* controls are soft: pills */
  --r-niche: 999px 999px 0 0;         /* the arch: images sit in a niche */
  --top-pad: clamp(10px, 1.6vw, 18px);
  --shadow-card: 0 0 0 1px var(--line); /* no drop shadows (charte): a hairline ring */
  --shadow-float: 0 1px 2px rgb(0 0 0 / .05), 0 14px 32px -22px rgb(0 0 0 / .32); /* only for chrome that floats over content */

  /* ---------- legacy names (older v2 CSS), retinted onto the charter ---------- */
  --creme:          var(--blanc-casse);
  --porcelaine:     var(--ivoire);
  --encre:          var(--noir);
  --encre-soft:     rgb(0 0 0 / .72);
  --ligne:          rgb(0 0 0 / .13);
  --ligne-forte:    rgb(0 0 0 / .28);
  --ligne-ui:       var(--line-ui);
  --sauge-profonde: var(--ink-2);
  --givre:          var(--field-hi);
  --glace:          #A6BCB1;  /* decorative ice (3D only). Never text */
  --glace-profonde: #7E968A;  /* deep ice (3D only). Never text */
  --nuit:           var(--noir);
  --brume:          var(--gris-pierre);
  --ligne-nuit:     rgb(254 251 244 / .18);
  --grenade:        var(--framboise);
  --neige:          var(--blanc-casse);
  --night:          var(--band);  /* « night » bands are now the brand's sage bands */
  --night-ink:      var(--band-ink);
  --night-ink-2:    var(--band-ink-2);

  /* ---------- fonts ---------- */
  --font-sans:    "Questrial", "Century Gothic", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-display: var(--font-sans); /* one family (legacy alias) */
  --font-mono:    var(--font-sans);
  --font-script:  "Abramo", var(--font-sans); /* identity only (see the @font-face hook above) */

  /* ---------- type scale (Questrial 400 only: size, case and tracking make the hierarchy) ---------- */
  --t-hero:   clamp(1.75rem, 1.2rem + 1.7vw, 2.75rem);  /* the home H1 inside the niche */
  --t-display: clamp(2.5rem, 1.6rem + 3.8vw, 5rem);     /* page H1s (« Fruits givrés »), lh 1.02, tr -.02em */
  --t-h2:     clamp(1.875rem, 1.4rem + 1.9vw, 3rem);    /* section titles, lh 1.08, tr -.012em */
  --t-title:  clamp(1.3rem, 1.1rem + .7vw, 1.75rem);    /* product / coffret names, lh 1.15 */
  --t-lead:   clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  --t-body:   1.0625rem;                                 /* lh 1.6, max 62ch */
  --t-small:  .9375rem;
  --t-label:  .78125rem;                                 /* spaced capitals in a sage box: tr .3em */
  --t-btn:    .875rem;                                   /* buttons: capitals, tr .12em */
  --tr-label: .3em; --tr-caps: .14em; --tr-btn: .12em; --tr-display: -.02em; --tr-h2: -.012em;
  /* legacy scale names */
  --t-mega: var(--t-display); --t-statement: var(--t-h2); --t-numeral: var(--t-display); --t-body-l: var(--t-lead);
  --t-eyebrow: var(--t-label); --t-mono: .75rem;
  --lh-mega: 1; --lh-display: 1.02; --lh-statement: 1.1; --lh-lead: 1.4; --lh-title: 1.15; --lh-body: 1.6;
  --tr-mega: var(--tr-display); --tr-lead: 0em; --tr-eyebrow: var(--tr-label); --tr-mono: .06em;

  /* ---------- spacing (8px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px;
  --section-y: clamp(96px, 13vw, 192px);
  --maxw: 1440px;
  --gutter: 16px;
  --gap: 12px;
  --cols: 4;
  --header-h: 60px;
  --header-offset: var(--header-h);
  --announce-live: 0px;

  /* ---------- radii & lines ---------- */
  --r-0: 0; --r-xs: 2px; --r-pill: 999px;
  --hair: 1px;

  /* ---------- shadows (soft contact shadows for objects only) ---------- */
  --contact-shadow: radial-gradient(closest-side, rgb(0 0 0 / .14), rgb(0 0 0 / 0));
  --gap-shadow:     radial-gradient(closest-side, rgb(0 0 0 / .28), rgb(0 0 0 / 0));

  /* ---------- motion ---------- */
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --ease-out-soft: cubic-bezier(.22, 1, .36, 1);
  --ease-in:       cubic-bezier(.5, 0, .75, 0);
  --ease-in-out:   cubic-bezier(.65, 0, .35, 1);
  --ease-sine:     cubic-bezier(.37, 0, .63, 1);
  --dur-1: 150ms; --dur-2: 300ms; --dur-3: 450ms; --dur-4: 600ms;
  --dur-5: 900ms; --dur-6: 1100ms; --dur-7: 1200ms;

  /* ---------- z-index ---------- */
  --z-base: 0; --z-snow-back: 1; --z-fruit: 2; --z-snow-front: 3; --z-content: 4;
  --z-burst: 50; --z-header: 60; --z-menu: 70; --z-skip: 110; --z-obar: 55;

  /* one weight only: never let the browser fake a bold or an italic of Questrial */
  font-synthesis: none;
}
@media (min-width: 640px)  { :root { --gutter: 32px; --gap: 20px; --cols: 8; } }
@media (min-width: 1024px) { :root { --gutter: clamp(32px, 4.4vw, 72px); --gap: 24px; --cols: 12; --header-h: 72px; --t-mono: .8125rem; } }

/* ---------- the brand vocabulary (the client's menu), shared by every page ---------- */
/* a sage label box with spaced capitals: « F R U I T S  G I V R É S » */
.label { display: inline-block; margin: 0; padding: .72em 1.15em .68em calc(1.15em + var(--tr-label)); background: var(--sauge); color: var(--noir);
  font: 400 var(--t-label)/1.2 var(--font-sans); letter-spacing: var(--tr-label); text-transform: uppercase; }
/* a section heading between two dots: « • B O I S S O N S  C H A U D E S • » */
.dots { display: flex; align-items: center; justify-content: center; gap: .9em; margin: 0; color: var(--noir);
  font: 400 var(--t-label)/1.3 var(--font-sans); letter-spacing: var(--tr-label); text-transform: uppercase; text-align: center; }
.dots::before, .dots::after { content: "•"; letter-spacing: 0; }
/* the brand's hand-drawn heart, as sparse decoration: <svg class="deco-heart"><use href="assets/img/sprite.svg#heart"/></svg> */
.deco-heart { position: absolute; z-index: 0; display: block; width: var(--hs, 160px); height: auto; aspect-ratio: 220 / 235; color: var(--sauge); fill: currentColor; pointer-events: none; }