/* ==========================================================================
   Un Pedacito De Ella — design system
   Source of truth for colour and type. Recovered from the original .upde
   mockup (reference/mockup.html) and the Shopify Align homepage.

   Everything downstream — Elementor widgets, Woo templates, site.css —
   references these tokens. Do not hardcode hex values anywhere else.
   ========================================================================== */

:root {
  /* --- Brand colour ----------------------------------------------------- */
  --upde-terra:       #C1714F;  /* brand terracotta - LARGE areas and fills only.
                                   Only 3.53:1 against cream, so it must never
                                   carry text or be a text colour.            */
  --upde-terra-dark:  #9A5A3F;  /* accessible terracotta. 5.19:1 on cream and
                                   4.53:1 on sand, so it works both as a button
                                   fill under cream text and as a text colour.
                                   Measured, not guessed.                     */
  --upde-brown:       #3D2314;  /* dark sections, reviews background         */
  --upde-cream:       #FDFBF5;  /* page background - lifted, closer to paper */
  --upde-cream-dk:    #F2EBDD;  /* alternating section ground                */
  --upde-gold:        #C9A96E;  /* stars, hairline accents                   */

  /* PROVISIONAL. Read off a compressed screenshot of the old Shopify hero.
     Must be replaced with an eyedropper sample from Linda's original hero
     image before homepage sign-off. Used in exactly one place. */
  --upde-forest:      #3F4A33;

  /* --- Neutrals --------------------------------------------------------- */
  --upde-ink:         #2A2118;  /* body copy                                 */
  --upde-muted:       #78685B;  /* secondary copy. Nudged darker: the old value
                                   was 4.38:1 on the sand sections, under AA.  */
  --upde-line:        #E5DACA;  /* hairlines, card borders                   */
  --upde-white:       #FFFFFF;

  /* --- Type ------------------------------------------------------------- */
  --upde-font-display: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  --upde-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --upde-tracking-eyebrow: 0.18em;

  /* Heading leading. 0.9 is what makes large editorial type look set rather
     than typed - it is the single biggest difference from the old design. */
  --upde-lh-display:   0.92;
  --upde-lh-heading:   1.0;
  --upde-lh-body:      1.6;

  /* --- Rhythm ----------------------------------------------------------- */
  --upde-section-y:    clamp(4.5rem, 9vw, 9rem);
  --upde-gap:          clamp(1rem, 2vw, 1.75rem);
  --upde-maxw:         1180px;
  /* Square. Rounded corners on a craft/apothecary brand read as software;
     square reads as print. This follows the reference (P.F. Candle Co ships
     --button-border-radius: 0 and square media throughout) and only works
     because the photography is strong enough to carry a hard edge. */
  --upde-radius:       0;
  --upde-radius-md:    0;
  --upde-radius-lg:    0;
  --upde-radius-xl:    0;

  /* 1px warm rule, used as structure rather than decoration. */
  --upde-grid:         #D8CFBC;

  /* Depth. Tinted with the brand brown rather than neutral black - a grey
     shadow over cream reads as dirt, a warm one reads as light. */
  --upde-shadow-sm:  0 1px 2px rgba(61,35,20,.05), 0 2px 6px rgba(61,35,20,.04);
  --upde-shadow-md:  0 2px 4px rgba(61,35,20,.05), 0 8px 20px rgba(61,35,20,.07);
  --upde-shadow-lg:  0 4px 8px rgba(61,35,20,.06), 0 18px 44px rgba(61,35,20,.10);
  --upde-shadow-xl:  0 8px 16px rgba(61,35,20,.07), 0 32px 72px rgba(61,35,20,.14);
  --upde-shadow:     var(--upde-shadow-md);

  /* Motion. 180ms for state, 420ms for anything moving through space. */
  --upde-ease:       cubic-bezier(.22,.61,.36,1);
  --upde-ease-out:   cubic-bezier(.16,1,.3,1);
  --upde-t-fast:     180ms;
  --upde-t-base:     280ms;
  --upde-t-slow:     420ms;
}

/* --- Type scale ---------------------------------------------------------
   Fluid so the same tokens hold from 360px to desktop without breakpoints. */
:root {
  /* Wider range top to bottom. The old scale topped out at 4rem, which on a
     full-width hero reads as a subheading rather than a statement. */
  --upde-display: clamp(2.75rem, 7.5vw, 6.5rem);
  --upde-h1: clamp(2.5rem, 6vw, 4.75rem);
  --upde-h2: clamp(2rem, 4vw, 3.25rem);
  --upde-h3: clamp(1.2rem, 1.9vw, 1.6rem);
  --upde-body: clamp(0.95rem, 1.05vw, 1.0625rem);
  --upde-small: 0.8125rem;
}