/* ══════════════════════════════════════════
   BASE — Variables, Reset, Typography, Animations, Responsive
   ══════════════════════════════════════════ */

:root {
  --cream:#F5F0E8; --warm-white:#FAF7F2; --terracotta:#C45C3A; --terracotta-light:#E8896B;
  --dark-green:#2C3E2D; --sage:#7A9E7E; --ink:#1E1A16; --ink-light:#4A443C;
  --gold:#C49A3C; --border:rgba(30,26,22,0.12); --card-bg:#FAF7F2; --header-bg:#2C3E2D;
  --overlay-bg:rgba(30,26,22,0.75); --input-bg:#F5F0E8;
}
body.dark {
  --cream:#1C1916; --warm-white:#252118; --ink:#EDE8DF; --ink-light:#A89F93;
  --border:rgba(245,240,232,0.1); --card-bg:#252118; --header-bg:#0F1710;
  --overlay-bg:rgba(0,0,0,0.85); --input-bg:#1C1916; --dark-green:#0F1710;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif;font-weight:300;overflow-x:hidden;transition:background .3s,color .3s}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-10px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── SHARED OVERLAY ── */
#panel-overlay{display:none;position:fixed;inset:0;z-index:299;background:rgba(0,0,0,.35)}

/* ── RESPONSIVE ── */
@media(max-width:1020px){
  .hero{grid-template-columns:1fr;padding:56px 24px}
  .hero-art{height:250px}
  .recipes-grid{grid-template-columns:1fr 1fr}
  .categories-grid{grid-template-columns:repeat(3,1fr)}
  .tips-section{grid-template-columns:1fr}
  header{padding:0 16px}
  .hn-btn span{display:none}
  .generator-section,.recipes-section,.search-section,.categories-section,.tips-section{padding:52px 24px}
  .side-panel{width:100%;right:-100%}
  .planner-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:620px){
  .recipes-grid{grid-template-columns:1fr}
  .categories-grid{grid-template-columns:1fr 1fr}
  .planner-grid{grid-template-columns:repeat(2,1fr)}
  .planner-picker-grid{grid-template-columns:1fr 1fr}
  .nutrition-grid{grid-template-columns:repeat(2,1fr)}
}