/* ==========================================================================
   Liora Essence — design tokens
   Layer 1: primitives (brand-given)  →  Layer 2: semantic (usage-bound)
   Contrast ratios in comments are measured against the stated background.
   ========================================================================== */

:root {
  /* ---- Layer 1: brand primitives (fixed by brief, do not edit) ---- */
  --liora-ivory:      #F5EFE6;  /* Warm Ivory   */
  --liora-terracotta: #C9714A;  /* Terracotta   */
  --liora-olive:      #6B7145;  /* Dusty Olive  */
  --liora-gold:       #C9A84C;  /* Muted Gold   */
  --liora-espresso:   #2C1A0E;  /* Deep Espresso*/
  --liora-offwhite:   #FAF7F4;  /* Off-White    */

  /* ---- Layer 1b: derived, accessibility-corrected ----
     Terracotta as specified carries white at only 3.53:1. These fills do.  */
  --liora-terracotta-fill:  #A95733;  /* white text 5.12:1 — buttons/fills   */
  --liora-terracotta-press: #8E4829;  /* active state                        */
  --liora-olive-fill:       #565B37;  /* white text 7.13:1                   */
  --liora-espresso-soft:    #4A3524;  /* muted text 10.78:1 on --surface     */
  --liora-ivory-dim:        #EAE1D4;  /* borders/rules on ivory              */
  --liora-oxblood:          #8C2F26;  /* error — reads distinct vs terracotta */
  --liora-forest:           #3F6B4A;  /* success                             */

  /* ---- Layer 2: semantic surfaces ---- */
  --surface:          var(--liora-offwhite);
  --surface-raised:   #FFFFFF;
  --surface-sunken:   var(--liora-ivory);
  --surface-inverse:  var(--liora-espresso);

  /* ---- Layer 2: semantic text ----
     on --surface: body 15.60:1, muted 10.78:1 — both pass AAA */
  --text:             var(--liora-espresso);
  --text-muted:       var(--liora-espresso-soft);
  --text-inverse:     var(--liora-offwhite);
  --text-on-accent:   #FFFFFF;

  /* ---- Layer 2: lines ---- */
  --border:           var(--liora-ivory-dim);   /* 1.21:1 — decorative rules only  */
  --border-strong:    #D3C6B4;                  /* 1.57:1 — dividers, not controls */
  --border-input:     #A08B6F;                  /* 3.07:1 — meets WCAG 1.4.11 for
                                                   form fields, checkboxes, radios */
  --rule-gold:        var(--liora-gold);   /* decorative hairline ONLY, never text */

  /* ---- Layer 2: interactive ---- */
  --accent:           var(--liora-terracotta);      /* brand mark, decoration   */
  --accent-fill:      var(--liora-terracotta-fill); /* anything carrying white  */
  --accent-press:     var(--liora-terracotta-press);
  --focus-ring:       var(--liora-espresso);

  /* ---- Layer 2: status ---- */
  --error:            var(--liora-oxblood);
  --success:          var(--liora-forest);
  --notice:           var(--liora-olive-fill);

  /* ---- Type ---- */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Type scale — 1.250 major third, 16px base, fluid to 1280px */
  --step--1: clamp(0.83rem, 0.81rem + 0.09vw, 0.89rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.18vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.33vw, 1.41rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.56vw, 1.76rem);
  --step-3:  clamp(1.73rem, 1.54rem + 0.90vw, 2.20rem);
  --step-4:  clamp(2.07rem, 1.78rem + 1.39vw, 2.75rem);
  --step-5:  clamp(2.49rem, 2.04rem + 2.10vw, 3.44rem);
  --step-6:  clamp(2.99rem, 2.32rem + 3.10vw, 4.30rem);

  /* Prices and any tabular figure column rely on Inter's tnum */
  --font-numeric: var(--font-body);

  /* ---- Space — 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;    --sp-10: 8rem;

  /* ---- Measure ---- */
  --measure: 68ch;          /* body copy line length ceiling */
  --measure-narrow: 46ch;

  /* ---- Radius — deliberately restrained; not one value on everything ---- */
  --radius-input: 2px;
  --radius-card:  0px;      /* product cards are square-cornered by design */
  --radius-pill:  999px;    /* badges only */

  /* ---- Container ---- */
  --container: 1280px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);

  /* ---- Motion — one orchestrated moment, not scattered effects ---- */
  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
}

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