/* ===========================================================
   喝啥 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;

  /* 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 */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --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;
}

/* density tweak */
[data-density="compact"] {
  --s-4: 12px; --s-5: 16px; --s-6: 20px;
}

/* 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 */
.scroll::-webkit-scrollbar { display: none; }
.scroll { -ms-overflow-style: none; scrollbar-width: none; }