/* =========================================================================
   Iori · Colors
   Natural, low-saturation palette. "Cute" comes from roundness & softness,
   never from loud color. Sage is the single primary action color.
   ========================================================================= */
:root {
  /* ---- Base palette (raw brand colors) ---- */
  --oat:        #F5EFE3; /* 燕麦纸 — main background (warm paper) */
  --ink:        #33302A; /* 暖墨 — primary text / dark surfaces */
  --ink-soft:   #7A7165; /* 暖墨柔 — secondary text / captions */
  --sage:       #8B9A78; /* 苔绿 — PRIMARY action: buttons, selected, accent */
  --sage-dark:  #76876A; /* sage hover / pressed */
  --clay:       #D97757; /* 暖陶 — secondary accent / warm touch / the fur mark */
  --blush:      #E8CDBC; /* 柔粉 — soft highlight / tag bg / hover wash */
  --mist:       #7E93A8; /* 雾蓝 — calm blue accent (info / links / cool touch) */
  --mist-dark:  #6B8095; /* mist hover / pressed */
  --tile:       #EDE4D2; /* 瓦片 — card gradient top */
  --tile-2:     #E6DAC4; /* 瓦片深 — card gradient bottom */
  --white:      #FFFFFF;

  /* ---- Hairline / borders ---- */
  --line:       rgba(51, 48, 42, 0.12); /* 描边 — dividers, card borders */
  --line-soft:  rgba(51, 48, 42, 0.06); /* fainter inner dividers */

  /* ---- Semantic aliases (use these in product code) ---- */
  --surface-page:    var(--oat);
  --surface-card:    rgba(255, 255, 255, 0.70); /* translucent over paper */
  --surface-card-solid: #FFFFFF;
  --surface-raised:  var(--ink);   /* dark inverted panels (footer, member CTA) */
  --surface-sunken:  rgba(51, 48, 42, 0.05);
  --surface-wash:    rgba(232, 205, 188, 0.30); /* blush wash for hover/selected bg */

  --text-strong:     var(--ink);
  --text-body:       var(--ink);
  --text-muted:      var(--ink-soft);
  --text-on-dark:    var(--oat);
  --text-on-accent:  #FFFFFF;

  --accent:          var(--sage);
  --accent-hover:    var(--sage-dark);
  --accent-soft:     rgba(139, 154, 120, 0.15); /* sage tint bg */
  --accent-warm:     var(--clay);

  --border:          var(--line);
  --border-strong:   rgba(51, 48, 42, 0.20);

  --focus-ring:      var(--sage);
  --selection-bg:    var(--blush);
}