/* ═══════════════════════════════════════════════════════════
   FoodTracker — Базовые стили (Base)
   ═══════════════════════════════════════════════════════════
   Сброс, body, типографика, иконки-хелперы, layout, анимации.
   ═══════════════════════════════════════════════════════════ */

/* ─── Сброс ─── */
*{margin:0;padding:0;box-sizing:border-box}

/* ─── Body ─── */
body{
  font-family:var(--font-family);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  padding-bottom:100px;
  overflow-x:hidden;
  transition:background var(--transition-slow),color var(--transition-slow)
}
a{color:var(--pri);text-decoration:none}

/* ─── Layout ─── */
.container{max-width:600px;margin:0 auto;padding:var(--space-3xl)}
.screen{display:none}
.screen.active{display:block}

/* ─── Хелперы иконок ─── */
.h-icon{width:var(--icon-lg);height:var(--icon-lg);flex-shrink:0;vertical-align:-3px}
.b-icon{width:var(--icon-md);height:var(--icon-md);vertical-align:-2px}
.i-icon{width:var(--icon-sm);height:var(--icon-sm);vertical-align:-2px}

/* ─── Анимации ─── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:none;opacity:1}}
@keyframes slideDown{from{transform:translateX(-50%) translateY(-100%);opacity:0}to{transform:translateX(-50%);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse-rec{0%,100%{box-shadow:0 0 0 0 rgba(var(--err-rgb),.4)}50%{box-shadow:0 0 0 16px rgba(var(--err-rgb),0)}}
@keyframes dotBounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}