/* ===========================================================================
   VELVET EMBRACE — DESIGN TOKENS
   ---------------------------------------------------------------------------
   One source for every colour, face and rhythm on the site.

   THE PALETTE IS NOT INVENTED. Every colour below was sampled out of the logo
   she supplied (reference/logo-as-supplied.jpg) by tools/sample-brand.py. Run
   that script again if she sends a better logo file and the numbers change.

   ⚠  THE LOGO WE HAVE IS A 561x540 WHATSAPP SCREENSHOT with the marble
      backdrop baked into it. It is good enough to sample colour from and NOT
      good enough to put on a website at any size. See QUESTIONS-FOR-VIKKI.md
      — a clean file is the single most useful thing she can send.
   ========================================================================= */

:root {
  /* ---- sampled from the logo. Re-derive with tools/sample-brand.py ---- */
  --sage:        #90a88a;   /* the disc behind the lettering */
  --silver:      #a8a8ae;   /* the ribbon under "EMBRACE" */
  --paper:       #eaf0ea;   /* the pale marble ground — the page background */

  /* ---- derived ----
     Sage is a mid-tone: it is a background, never body text. #90ac8c on white
     is 2.2:1, which fails every contrast rule there is. --sage-deep is the
     one to write in, and it clears 4.5:1 on --paper and on white. */
  --sage-deep:   #4a6247;
  --sage-mid:    #6f8a6b;
  --sage-soft:   #c3d4c0;
  --sage-wash:   #dfe8dd;

  --ink:         #2f342e;   /* body text. Warm charcoal, never pure black */
  --ink-soft:    #5c645a;
  /* ⚠ DARKENED FROM #8b928a, which measured 3.19:1 on white — well under the
     4.5:1 small text needs, and it is used for form hints and small print:
     the two places on the page where somebody is being TOLD something. This
     value clears 4.5:1 on all four grounds the site uses (white 5.78, warm
     5.41, paper 5.00, wash 4.60). Verified by tools/check-a11y.py. */
  --ink-faint:   #616859;

  --silver-deep: #7d7d84;
  --silver-pale: #d9d9de;

  --white:       #ffffff;
  --paper-warm:  #f6f8f5;

  /* ---- type ----
     Her logo pairs a flowing SCRIPT with wide-tracked CAPS. The site does not
     imitate the script anywhere in running text — a near-miss script is worse
     than none, and the logo should be the only place it appears. It carries
     the script; the page carries these two.

       Fraunces  display. Soft-serif with a real optical-size axis, so the
                 serifs bloom at headline sizes and tighten at small ones.
                 Deliberately NOT Cormorant: that is Gleam & Glow's face, and
                 two clients in one portfolio should not share a typeface.
       Figtree   body. Humanist geometric, warm, wide apertures, holds up at
                 15px on a phone. Not Inter, not Space Grotesk.

     ⚠ SELF-HOSTED, always. See tools/fetch-fonts.py. A font CDN on a site
       that takes names and addresses announces every visitor to a third
       party, and the visitor never agreed to that. */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;

  /* Fraunces ships a WONK axis (the playful, cocked serifs) and a SOFT axis.
     Wonk is OFF everywhere: at 0 it is an elegant soft-serif, at 1 it is a
     novelty face, and this is a fragrance shop rather than a jam label. */
  --display-settings: 'SOFT' 30, 'WONK' 0;

  /* ---- spacing ---- */
  --pad: clamp(1.25rem, 5vw, 3rem);
  --gap: clamp(1.5rem, 3vw, 2.5rem);
  --section: clamp(4rem, 10vw, 8rem);
  --max: 1200px;
  --max-text: 60ch;

  /* ---- shape ---- */
  --radius: 6px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- depth. Green-tinted, never neutral grey. ---- */
  --shadow-sm: 0 2px 10px rgba(74, 98, 71, .07);
  --shadow:    0 12px 40px -12px rgba(74, 98, 71, .20);
  --shadow-lg: 0 30px 80px -24px rgba(74, 98, 71, .30);

  /* ---- motion ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}