/* foodino — design tokens (ported from ui.jsx) + base reset + shared atoms */

:root {
  /* warm neutral palette (client) */
  --cream:    #F6F1E9;
  --cbg:      #F3F1EC;   /* page background, client (tweak default) */
  --card:     #FFFFFF;
  --ink:      #1A1815;
  --ink70:    #5C564D;
  --ink45:    #928B7E;
  --line:     #ECE5D8;
  --line-soft:#F3EEE4;
  /* single accent + semantic statuses */
  --orange:      #FF5A1F;
  --orange-press:#E84C13;
  --orange-wash: #FFEDE4;
  --green:       #2FA86A;
  --green-wash:  #E4F4EC;
  --amber:       #E0902B;
  --amber-wash:  #FBEFDC;
  /* dashboard dark theme (kitchen phone stand) */
  --d-bg:    #16140F;
  --d-card:  #221F18;
  --d-card2: #2B271E;
  --d-ink:   #F4EFE6;
  --d-ink60: #A39C8C;
  --d-line:  #34301F;

  --font-display: 'Manrope', system-ui, sans-serif;
  --font-text:    'Golos Text', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: var(--font-text);
  color: var(--ink);
}
a { color: inherit; text-decoration: none; }

::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-thumb { background: rgba(26,24,21,0.18); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── mobile screen shell ─────────────────────────────────────────────── */
/* Each route is a full-height phone-width page, centred on larger screens. */
.screen {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;   /* фикс. высота → скроллится тело, бары прибиты снизу */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.screen__body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }
.safe-top { padding-top: calc(env(safe-area-inset-top, 0px) + 18px); }

/* ── money (tabular figures) ─────────────────────────────────────────── */
.money {
  font-family: var(--font-display);
  font-weight: 700;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.2px;
  white-space: nowrap;
}
.money--strike { text-decoration: line-through; opacity: 0.45; }

/* ── pill / tag ──────────────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--line-soft); color: var(--ink70);
  font-family: var(--font-text); font-size: 13px; font-weight: 600; line-height: 1;
  white-space: nowrap;
}
.tag svg { flex-shrink: 0; }
.tag--green { background: var(--green-wash); color: var(--green); padding-left: 8px; }
.tag__dot { width: 7px; height: 7px; border-radius: 9px; display: inline-block; background: currentColor; }

/* ── round icon button ───────────────────────────────────────────────── */
.round-btn {
  width: 40px; height: 40px; border-radius: 999px; flex-shrink: 0;
  background: #fff; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(26,24,21,0.04);
}

/* ── food photo placeholder (diagonal stripes + mono caption) ────────── */
.foodph {
  position: relative; border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: repeating-linear-gradient(45deg, #EFE7D8 0 11px, rgba(26,24,21,0.045) 11px 22px);
}
.foodph__cap {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.5px;
  color: rgba(26,24,21,0.42); text-transform: lowercase; padding: 2px 7px;
  border: 1px solid rgba(26,24,21,0.13); border-radius: 5px;
  background: rgba(246,241,233,0.55); white-space: nowrap;
}
.foodph--gray { filter: grayscale(1); }
.foodph--dark {
  background: repeating-linear-gradient(45deg, #2A2620 0 11px, rgba(255,255,255,0.035) 11px 22px);
}
.foodph--dark .foodph__cap {
  color: rgba(244,239,230,0.5); border-color: rgba(244,239,230,0.18); background: rgba(22,20,15,0.25);
}

/* ── pulse / ring animations (from the design host) ──────────────────── */
@keyframes edRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,90,31,0.0); }
  50%      { box-shadow: 0 0 0 14px rgba(255,90,31,0.10); }
}
@keyframes edPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,90,31,0.45); transform: scale(1); }
  50%      { box-shadow: 0 0 0 18px rgba(255,90,31,0.0); transform: scale(1.04); }
}
@keyframes edPulseSoft {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,90,31,0.0); }
  50%      { box-shadow: 0 0 0 5px rgba(255,90,31,0.12); }
}
.ed-ring  { animation: edRing 2.6s ease-in-out infinite; }
.ed-pulse { animation: edPulse 1.5s ease-in-out infinite; }
.ed-pulse-soft { animation: edPulseSoft 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .ed-ring, .ed-pulse, .ed-pulse-soft { animation: none; }
}