/* ==========================================================================
   COLOR TOKENS — Tendy 田地故事
   An editorial earth palette. The UI stays quiet so produce photography is
   the most vivid thing on the page — but one disciplined pop of LEAF green
   (the sprout on the mark, the cart button, a focus glint) keeps it alive.
   Reconciled from the brand guide (leaf #9DBA66, kraft #B78E5A, beige #E9DFC9)
   and the website palette into a single coherent set.
   ========================================================================== */
:root{
  /* ---- Brand core ---- */
  --forest: #1F3D2B;   /* 深綠   primary — headlines, nav, primary CTA, footer */
  --pine:   #16301F;   /* deepest forest — footer floor / hover */
  --forest-deep: #132B23; /* optional espresso-green — moodier footer / dark sections */
  --olive:  #5B7A4A;   /* 橄欖綠  support surfaces, secondary green */
  --leaf:   #6E9A3E;   /* 嫩葉綠  the accent — icons on light, small emphasis */
  --leaf-bright: #9DBA66; /* the sprout / cart pop / decorative fresh green */
  --sage:   #94A98B;   /* 鼠尾草綠 muted — borders, decorative, quiet fills */
  --ivory:  #F6F2E8;   /* 暖米白  base page background */
  --paper:  #EFE8DC;   /* deeper cream — cards on ivory, alt sections */
  --beige:  #E9DFC9;   /* 大地米   sunken warm surface — panels, wells */
  --sand:   #D9B88C;   /* 淺牛皮   kraft-light accent — seals, cart bubble */
  --kraft:  #B78E5A;   /* 牛皮棕   deeper kraft — stamps, dark-surface CTA */
  --soil:   #6B4F34;   /* 土壤棕   deep warm — kraft text, illustration lines */

  /* ---- Working neutrals & text ---- */
  --ink:        #3A3A34;   /* body text — warm charcoal */
  --ink-soft:   #6E6E64;   /* secondary text (AA on ivory & white) */
  --olive-text: #4C6840;   /* accessible olive for overlines / small labels */
  --white:      #FFFFFF;
  --sage-light: #E2E8DA;   /* tint — chips, soft panels */
  --kraft-deep: #A67D4A;   /* deep kraft hover */
  --forest-hover: #16301F;
  --olive-hover:  #4C6840;
  --leaf-hover:   #5E8534;

  /* ---- Lines & placeholders ---- */
  --line:          rgba(31,61,43,.14);  /* hairline borders */
  --line-strong:   rgba(31,61,43,.24);  /* emphasised hairline */
  --placeholder:   #7C7C6E;             /* accessible placeholder on white */
  --disabled-fill: #E2E8DA;
  --disabled-ink:  #8A9382;             /* disabled label (control is exempt) */

  /* ---- Feedback ---- */
  --error:         #A33B2E;   /* warm red — error text / ring, never colour alone */
  --error-surface: #5C2E26;   /* error toast bg */
  --error-tint:    rgba(163,59,46,.10);
  --error-ring:    rgba(163,59,46,.16);
  --success:       #3B6B45;   /* confirmation green, readable on ivory */

  /* ---- Overlays on dark / forest surfaces ---- */
  --on-forest:       rgba(246,242,232,.94); /* primary text on forest */
  --on-forest-soft:  rgba(246,242,232,.72); /* secondary text on forest */
  --on-forest-faint: rgba(246,242,232,.55); /* tertiary / legal on forest */
  --on-forest-line:  rgba(246,242,232,.16); /* dividers on forest */
  --on-forest-fill:  rgba(246,242,232,.08); /* input wells on forest */
  --scrim:           rgba(31,61,43,.42);    /* sold-out / image scrim */
  --shimmer:         rgba(255,255,255,.55); /* skeleton sweep */
  --hill-back:       #2C4C38;               /* footer Hills — far band on forest */
  --hill-front:      #38583F;               /* footer Hills — near band on forest */
  --surface-nav:     rgba(246,242,232,.82); /* translucent ivory — sticky navbar behind blur */

  /* ---- Semantic aliases (what components reference) ---- */
  --bg-page:         var(--ivory);
  --surface-card:    var(--white);
  --surface-alt:     var(--paper);
  --surface-sunken:  var(--beige);
  --surface-inverse: var(--forest);
  --text-heading:  var(--forest);
  --text-body:     var(--ink);
  --text-muted:    var(--ink-soft);
  --text-inverse:  var(--ivory);
  --text-overline: var(--olive-text);
  --border-hair:   var(--line);
  --border-strong: var(--line-strong);
  --accent-warm:   var(--sand);
  --accent-leaf:   var(--leaf);
  --cart-accent:   var(--leaf-bright);
  --focus-ring:         var(--forest);
  --focus-ring-inverse: var(--ivory);
}