/* ═══════════════════════════════════════════════════════════════
   糧好生活 · 設計 token
   延伸 recipes-source.html 的「草莓牛奶小廚房」：
   奶油白底・草莓粉主色・蜂蜜黃與抹茶綠點綴・霞鶩文楷手寫標題

   命名一律語意化（--surface / --ink / --accent），不是 --奶油白。
   原始色值集中在最上面一段，換一組值就能換膚。
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* ── 原始色盤（唯一寫死顏色的地方）───────────────────── */
  --raw-cream:       #FFF6EF;
  --raw-white:       #FFFFFF;
  --raw-cocoa:       #4B3B33;
  --raw-taupe:       #A38F80;
  --raw-berry:       #E8708F;
  --raw-berry-deep:  #C05473;
  --raw-berry-soft:  #FCE9EF;
  --raw-honey:       #EFA43D;
  --raw-honey-deep:  #B87A17;
  --raw-honey-soft:  #FBF0DB;
  --raw-matcha:      #7FA05B;
  --raw-matcha-deep: #5C7740;
  --raw-matcha-soft: #EEF4E3;
  --raw-milk:        #FDF3E7;
  --raw-line:        #F2E4D8;

  /* ── 語意層：介面只用這一層 ───────────────────────────── */
  --bg:            var(--raw-cream);
  --surface:       var(--raw-white);
  --surface-sunk:  var(--raw-milk);
  --ink:           var(--raw-cocoa);
  --ink-soft:      var(--raw-taupe);
  --ink-faint:     #C9B8AA;
  --line:          var(--raw-line);

  --accent:        var(--raw-berry);
  --accent-deep:   var(--raw-berry-deep);
  --accent-soft:   var(--raw-berry-soft);
  --accent-ink:    #FFFFFF;

  --warm:          var(--raw-honey);
  --warm-deep:     var(--raw-honey-deep);
  --warm-soft:     var(--raw-honey-soft);

  --calm:          var(--raw-matcha);
  --calm-deep:     var(--raw-matcha-deep);
  --calm-soft:     var(--raw-matcha-soft);

  /* ── 效期狀態 ── spec 6-1 ─────────────────────────────
     顏色永遠只是三重標示裡的一重，另外兩重是圖示與中文字，
     見 components.css 的 .stat。色盲、以及站在冰箱前快速掃視都要顧到。 */
  --st-expired-fg:  var(--raw-berry-deep);
  --st-expired-bg:  var(--raw-berry-soft);
  --st-soon-fg:     var(--raw-berry-deep);
  --st-soon-bg:     var(--raw-berry-soft);
  --st-watch-fg:    var(--raw-honey-deep);
  --st-watch-bg:    var(--raw-honey-soft);
  --st-note-fg:     #8A7A52;
  --st-note-bg:     #F7F2E4;
  --st-safe-fg:     var(--raw-matcha-deep);
  --st-safe-bg:     var(--raw-matcha-soft);
  --st-none-fg:     var(--raw-taupe);
  --st-none-bg:     #F4EEE8;

  /* ── 字體 ─────────────────────────────────────────────
     --font-hand 是手寫感標題（像媽媽的食譜筆記），只用在標題。
     內文一律 --font-sans，確保長文可讀。

     ⚠️ 退路絕對不可以寫 cursive / serif。
     手寫字型是網路字型，手機用行動網路時要等好幾秒才到（CJK 字型很大）。
     那段時間如果退到 cursive，iOS 的中文會變成宋體 ——
     標題突然變襯線體，跟整個 App 的黑體完全不搭，看起來像壞掉。
     現在兩者的退路都是同一套系統黑體：字型沒到只是「少了手寫感」，
     不會變成另一種字體。

     系統字放在網路字型前面也是刻意的：iPhone 內建的蘋方本來就好看，
     不需要為了內文下載好幾 MB 的 CJK 網路字型。 */
  --font-hand: 'LXGW WenKai TC', -apple-system, 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --font-sans: -apple-system, 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;

  /* emoji 專用：讓 emoji 有自己的字型與行高，才不會把整行的行高撐歪 */
  --font-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;

  /* 內文基準 16px（提示詞要求；原始檔是 15px，這裡調上來） */
  --fs-body:  16px;
  --fs-small: 14px;
  --fs-tiny:  12.5px;
  --fs-title: 23px;
  --fs-brand: 30px;

  /* ── 尺寸 ─────────────────────────────────────────────
     --tap 是觸控元件的最小邊長，44px 是提示詞的硬要求，
     任何可點的東西都不准比它小。 */
  --tap: 44px;
  --r:      20px;   /* 卡片圓角 */
  --r-sm:   12px;
  --r-pill: 999px;

  --gap:    12px;
  --gap-list: 10px;   /* 清單、卡片、選單一律用這個，不要各寫各的 */
  --pad:    16px;
  --tabbar: 64px;

  /* ── 陰影：草莓牛奶用的是「實心位移」而不是模糊陰影，
        看起來像貼紙／紙張，比 blur 陰影更清爽 ───────────── */
  --lift:      0 3px 0 rgba(163, 143, 128, .10);
  --lift-warm: 0 3px 0 rgba(232, 112, 143, .08);
  --lift-pop:  0 6px 16px -8px rgba(232, 112, 143, .55);

  --ease: .15s ease;
}