/* ==========================================================================
   EVLENA — Design tokens
   Mirror these in theme.json (settings.color.palette / typography.fontSizes /
   spacing.spacingSizes) when porting to a WooCommerce block theme.
   ========================================================================== */

:root {
  /* ---- Color ------------------------------------------------------------ */
  --c-bg:          #F6F2EC; /* warm off-white (linen) */
  --c-surface:     #FFFDF9; /* cards, inputs */
  --c-sand-100:    #EFE8DD;
  --c-sand-200:    #E4D9C8;
  --c-sand-300:    #D9CBB4; /* flax */
  --c-sand-500:    #A8977C;
  --c-ink:         #1E1C1A; /* primary text / primary button */
  --c-ink-soft:    #4A4540;
  --c-muted:       #6F675E; /* secondary text (AA on bg) */
  --c-line:        #E1D8CA; /* borders */
  --c-clay:        #B4694A; /* accent: sale, highlights */
  --c-clay-dark:   #96523A;
  --c-sage:        #8A9A84;
  --c-sage-100:    #E5EAE1;
  --c-success:     #4F7A55;
  --c-error:       #B23A2B;
  --c-focus:       #B4694A;

  /* ---- Typography ------------------------------------------------------- */
  --ff-display: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ff-ui:      "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid scale (min @360px → max @1440px) */
  --fs-xs:   0.75rem;                                  /* 12 */
  --fs-sm:   0.8125rem;                                /* 13 */
  --fs-base: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);  /* 15→16 */
  --fs-md:   clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);  /* 17→20 */
  --fs-lg:   clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);/* 22→30 */
  --fs-xl:   clamp(1.875rem, 1.5rem + 1.6vw, 2.875rem);/* 30→46 */
  --fs-2xl:  clamp(2.5rem, 1.8rem + 3vw, 4.5rem);      /* 40→72 */
  --fs-hero: clamp(3rem, 1.9rem + 5.2vw, 7rem);        /* 48→112 */

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.6;

  --tracking-caps: 0.14em;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --section-y: clamp(3.5rem, 2rem + 6vw, 8rem);
  --gutter: clamp(1rem, 0.5rem + 2.2vw, 2.5rem);
  --container: 1440px;
  --container-narrow: 760px;

  /* ---- Shape & depth ---------------------------------------------------- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(30 28 26 / .06);
  --shadow:    0 10px 30px -12px rgb(30 28 26 / .18);
  --shadow-lg: 0 24px 60px -20px rgb(30 28 26 / .28);

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 150ms;
  --dur: 280ms;
  --dur-slow: 520ms;

  /* ---- Layout ----------------------------------------------------------- */
  --header-h: 68px;
  --announce-h: 36px;
  --z-header: 50;
  --z-sticky: 40;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}