/* ==========================================================================
   Crave Atelier — design tokens
   Derived from the client mockup, flattened to a 1440px-wide frame.
   Values in comments are the size at a 1440px viewport.

   Colours were sampled from the mockup and cleaned up for screen use:
   the mockup is lit like a photograph, so its creams sample greyer and its
   golds duller than the design intends. Hue is kept; lightness is corrected.
   See DESIGN_SPEC.md §2 for the raw samples.
   ========================================================================== */

:root {
  /* ---- Dark surfaces ---------------------------------------------------- */
  --ink-950: #0c0a08;          /* header + hero */
  --ink-900: #15110c;          /* brand promises, testimonials, footer */
  --ink-800: #1e160e;          /* dark button ("Read our story") */
  --ink-700: #2b2117;          /* raised surfaces on dark: dropdowns, drawer, input fill */

  /* ---- Light surfaces --------------------------------------------------- */
  --cream-50:  #f7f2eb;        /* product card */
  --cream-100: #efe8de;        /* Signature Collection background */
  --sand-100:  #efe4d6;        /* Ingredients background */
  --sand-200:  #e7d9c7;        /* Our Story panel, Instagram strip */
  --sand-300:  #d8c2a3;        /* card borders, hairlines on light */

  /* ---- Gold ------------------------------------------------------------- */
  --gold-200: #e2cba5;         /* script line, text on the dark button */
  --gold-400: #c9a46e;         /* icons, titles and stars on dark, active nav */
  --gold-500: #c19a64;         /* primary button fill */
  --gold-600: #a98050;         /* hover / pressed, newsletter submit */
  --gold-hairline: rgb(201 164 110 / 0.35);   /* dividers on dark */

  /* ---- Cocoa (gift panel) ---------------------------------------------- */
  --cocoa-600: #6b4527;
  --cocoa-700: #5a3a1f;
  --cocoa-900: #2e1d10;

  /* ---- Text ------------------------------------------------------------- */
  --text-on-dark: #f0e6d8;
  --text-on-dark-muted: #bdb2a4;
  --text-on-light: #2e2218;
  --text-on-light-body: #5a4a3a;
  --text-on-light-muted: #675849;  /* ≥ 4.9:1 on every cream/sand here — don't go lighter */

  /* ---- Type families ---------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;   /* caps headings */
  --font-serif: "Crimson Pro", "Cormorant Garamond", Georgia, serif;   /* hero sub-line, quotes */
  --font-label: "Marcellus", "Cormorant Garamond", Georgia, serif;     /* eyebrows, small titles */
  --font-body: "Lato", "Helvetica Neue", Arial, sans-serif;            /* nav + buttons (700), body (400) */
  --font-script: "Allura", "Pinyon Script", cursive;                   /* "Indulge in the finest" */

  /* ---- Type scale -------------------------------------------------------- */
  --fs-hero: clamp(2.5rem, 1.55rem + 2vw, 3.25rem);               /* 52 */
  --fs-script: clamp(2rem, 1.5rem + 1.4vw, 2.75rem);              /* 44 */
  --fs-h2: clamp(1.5rem, 1.1rem + 0.8vw, 1.75rem);                /* 28  story / gift headings */
  --fs-section-title: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);      /* 24 */
  --fs-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);            /* 26  hero sub-line (Crimson Pro) */
  --fs-quote: 1.25rem;          /* 20  Crimson Pro */
  --fs-card-title: 1.125rem;    /* 18  card names, Instagram heading */
  --fs-label-lg: 1.0625rem;     /* 17  "Stay updated" */
  --fs-label: 1rem;             /* 16  brand-promise + ingredient titles */
  --fs-nav: 0.875rem;           /* 14  Lato 700 */
  --fs-button-lg: 0.9375rem;    /* 15  hero buttons */
  --fs-button: 0.8125rem;       /* 13  card buttons */
  --fs-button-sm: 0.75rem;      /* 12  small buttons */
  --fs-body: 0.9375rem;         /* 15  (mockup 13–15) */
  --fs-small: 0.875rem;         /* 14  footer links, copyright */
  --fs-caption: 0.75rem;        /* 12  card descriptors, top-bar badges */
  --fs-eyebrow: 0.8125rem;      /* 13 */
  --fs-micro: 0.75rem;          /* 12  footer headings, Instagram handle */

  --ls-title: 0.04em;
  --ls-nav: 0.04em;
  --ls-label: 0.06em;
  --ls-button: 0.08em;
  --ls-micro: 0.1em;
  --ls-eyebrow: 0.14em;

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1200px;          /* x 120–1320 at 1440 */
  --container-wide: 1360px;     /* x 40–1400: Instagram strip, footer */
  --gutter: clamp(20px, 4vw, 40px);
  --section-pad: clamp(56px, 6vw, 88px);
  --section-pad-tight: clamp(40px, 4vw, 56px);
  --header-h: 200px;            /* desktop, as in the mockup */
  --header-h-mobile: 64px;
  --radius: 0;                  /* the mockup uses square corners */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Effects ---------------------------------------------------------- */
  --shadow-card: 0 12px 28px rgb(46 34 24 / 0.10);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 220ms;
}