/* ===========================================================
   喝啥 YO — Design tokens
   =========================================================== */
@font-face {
  font-family: "YeZi XiaoShiTou";
  src: url("./fonts/YeZiGongChangXiaoShiTou.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* type
     注：客户反馈手写体可读性差，先改回系统字体。
     @font-face 与 --font-hand 仍保留，方便后续切换其他字体时直接换回。 */
  --font-hand: "YeZi XiaoShiTou", "HanziPen SC", "Kaiti SC", "STKaiti", "KaiTi", cursive;
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "MiSans",
               "Noto Sans CJK SC", "Source Han Sans CN", system-ui,
               -apple-system, sans-serif;
  --font-num:  "Plus Jakarta Sans", "PingFang SC", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
  /* 衬线 — 用作小范围的设计点缀（如详情页"上市"日期），
     iOS Iowan Old Style → macOS Palatino → Win Georgia → 中文 Songti SC fallback。 */
  --font-serif: "Iowan Old Style", "Palatino Linotype", "Palatino",
                "Songti SC", "STSong", "Georgia", "Times New Roman", serif;

  /* neutrals — warm-tinted */
  --ink-1:   #1C1710;  /* primary text */
  --ink-2:   #4A3F30;
  --ink-3:   #867A65;
  --ink-4:   #B8AE9A;
  --ink-5:   #E6DFCF;
  --paper:   #FAFAFA;  /* app bg */
  --surface: #FFFFFF;
  --sunken:  #F6F1E4;

  /* brand */
  --brand-yellow: #FFC94D;
  --brand-yellow-soft: #FFE9A8;
  --brand-yellow-ink: #8A5A00;

  --brand-purple: #A78BFA;
  --brand-purple-soft: #EADDFD;
  --brand-purple-ink: #5B3FB0;

  /* data accents (calories / sugar / caffeine / price) */
  --data-cal:  #FF8A6B;   /* coral — calories */
  --data-cal-soft:  #FFE2D7;
  --data-sugar: #F4B63B;  /* amber — sugar */
  --data-sugar-soft: #FCEAC0;
  --data-caf:  #8C7BEE;   /* lilac — caffeine */
  --data-caf-soft: #E6E0FC;
  --data-price: #64BD8F;  /* green — price */
  --data-price-soft: #D5EDD8;
  --data-match: #EE7FA8;  /* pink */
  --data-match-soft: #FAD8E6;

  /* semantic */
  --good:  #4FB07A;
  --warn:  #E8A33B;
  --bad:   #E06953;

  /* radii — 对齐 iOS 17/18 阶段的圆角设计（2026-07-03 客户选定：圆角偏小、更利落，
     不采用 iOS 26 之后放大的同心圆角风格）。全局只用 token、不写死数值。
     角色：xs 微型标签/小色块 · sm 缩略图/内嵌图/提示条 · md 按钮/输入框/密集列表行
           lg 标准内容卡片（默认） · xl 详情页头卡/大卡 · 2xl 页面级滑卡/弹层 */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-pill: 9999px;

  /* shadows — subtle, almost flat */
  --sh-1: 0 0 0 0.5px rgba(28,23,16,0.04);
  --sh-2: 0 1px 2px rgba(28,23,16,0.02), 0 0 0 0.5px rgba(28,23,16,0.05);
  --sh-3: 0 2px 8px rgba(28,23,16,0.04), 0 0 0 0.5px rgba(28,23,16,0.06);

  /* spacing (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
}

/* theme tweaks */
[data-theme="purple"] {
  --brand-yellow: #A78BFA;
  --brand-yellow-soft: #EADDFD;
  --brand-yellow-ink: #5B3FB0;
}
[data-theme="matcha"] {
  --brand-yellow: #9FCC85;
  --brand-yellow-soft: #E1F0D5;
  --brand-yellow-ink: #3F6B2A;
}

/* dark mode */
[data-mode="dark"] {
  --ink-1:#F3EEE2; --ink-2:#C9C0AE; --ink-3:#8A8170; --ink-4:#5B5446; --ink-5:#2E291F;
  --paper:#17140E; --surface:#1F1A12; --sunken:#262016;
  --sh-1: 0 1px 2px rgba(0,0,0,0.3);
  --sh-2: 0 2px 6px rgba(0,0,0,0.35), 0 8px 20px rgba(0,0,0,0.3);
  --sh-3: 0 8px 24px rgba(0,0,0,0.5);
}

/* reset-ish */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-sans); color: var(--ink-1); -webkit-font-smoothing: antialiased; }
button { font-family: inherit; border: none; background: none; padding: 0; cursor: pointer; color: inherit; }
input, textarea { font-family: inherit; color: inherit; }

/* utility: striped placeholder for imagery */
.placeholder {
  background:
    repeating-linear-gradient(135deg,
      rgba(28,23,16,0.06) 0 10px,
      rgba(28,23,16,0.03) 10px 20px),
    var(--sunken);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  border-radius: var(--r-md);
  letter-spacing: 0.02em;
}

/* pill + chip + card primitives */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); font-size: 12px; line-height: 1; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--r-xs); font-size: 11px; font-weight: 500; }
.card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-1); }

/* scrollbar kill + 锁住横向 overscroll，避免 macOS 浏览器返回手势 / 橡皮筋回弹 */
.scroll::-webkit-scrollbar { display: none; }
.scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* 主页卡片「左右滑动」提示箭头呼吸动画（客户 2026-05-09） */
@keyframes swipeHintArrowL {
  0%, 100% { transform: translateX(0);    opacity: 0.55; }
  50%      { transform: translateX(-3px); opacity: 1;    }
}
@keyframes swipeHintArrowR {
  0%, 100% { transform: translateX(0);    opacity: 0.55; }
  50%      { transform: translateX(3px);  opacity: 1;    }
}
/* 登录协议未勾选时的轻微抖动 */
@keyframes hsShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}
/* 首页卡片动作「选中确认」弹性弹出（客户 2026-06-23）—— 只动 scale，opacity 恒为 1，保证始终可见 */
@keyframes confirmPop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
/* 首页卡片动作「Genie 收进按钮」（客户 2026-06-23）。
   --gx/--gy = 卡片中心到目标按钮中心的位移，运行时内联设置。
   多关键帧编码「缓起步 → 加速下坠 → 收进按钮」的曲线轨迹，比单一 cubic-bezier
   的直线缩放更接近 macOS genie 的自然感；opacity 只在末段淡出，让卡片看得见地
   飞进按钮而不是中途消失。 */
@keyframes genieFall {
  0% {
    transform: translate(0px, 0px) scale(1);
    opacity: 1;
  }
  20% {
    transform: translate(calc(var(--gx) * 0.08), calc(var(--gy) * 0.05)) scale(0.88);
    opacity: 1;
  }
  55% {
    transform: translate(calc(var(--gx) * 0.42), calc(var(--gy) * 0.38)) scale(0.52);
    opacity: 1;
  }
  82% {
    transform: translate(calc(var(--gx) * 0.82), calc(var(--gy) * 0.8)) scale(0.2);
    opacity: 0.9;
  }
  100% {
    transform: translate(var(--gx), var(--gy)) scale(0.05);
    opacity: 0;
  }
}