/* กับข้าวคุณแม่ — Design tokens
   Warm, homey, mom's kitchen palette */

@import url('https://fonts.googleapis.com/css2?family=Charm:wght@400;700&family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&display=swap');

:root {
  /* ── color ── */
  --cream-50:  #FBF6EC;   /* page bg */
  --cream-100: #F5EBD7;   /* surface tinted */
  --cream-200: #ECD9B6;   /* surface tinted darker / divider */
  --cream-300: #DCC197;   /* hairline / chip bg */

  --paper:     #FFFCF5;   /* card */
  --paper-2:   #FFF7E6;   /* card hover */

  --brown-900: #2A1A0E;   /* primary text */
  --brown-700: #5A3E26;   /* heading accent */
  --brown-500: #8B6840;   /* secondary text */
  --brown-300: #BFA37D;   /* tertiary */

  --terra:     #C2410C;   /* primary action — terracotta */
  --terra-700: #9A330A;
  --terra-100: #FBE3D2;

  --mustard:   #D97706;   /* badge / price */
  --mustard-100: #FDE6BD;

  --leaf:      #5F7A3C;   /* veg green */
  --leaf-100:  #DFE7CC;

  --chili:     #B91C1C;   /* spicy */

  --ink-on-terra: #FFFCF5;

  /* ── radii ── */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* ── shadow ── */
  --shadow-sm: 0 1px 2px rgba(94, 56, 22, 0.08);
  --shadow-md: 0 6px 16px -6px rgba(94, 56, 22, 0.18), 0 2px 4px rgba(94, 56, 22, 0.08);
  --shadow-lg: 0 24px 40px -16px rgba(94, 56, 22, 0.28), 0 4px 8px rgba(94, 56, 22, 0.10);

  /* ── font ── */
  --font-display: 'Charm', 'IBM Plex Sans Thai', serif;
  --font-body: 'IBM Plex Sans Thai', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--brown-900);
  background: #E9DCC0;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}

input, textarea {
  font-family: inherit;
  color: inherit;
}

/* hide scrollbar but allow scroll */
.scroll-hide::-webkit-scrollbar { display: none; }
.scroll-hide { scrollbar-width: none; }

/* shimmer for placeholder food images */
.food-ph {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 60%),
    repeating-linear-gradient(135deg, var(--c1, #ECD9B6) 0 12px, var(--c2, #DCC197) 12px 24px);
}

/* press feedback */
.press { transition: transform 0.12s ease, background 0.15s ease; }
.press:active { transform: scale(0.97); }

/* fade-up entry */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.32s ease both; }

/* slide-up sheet */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.slide-up { animation: slideUp 0.3s cubic-bezier(.2,.8,.2,1) both; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn 0.2s ease both; }