/* Theme variables - light (Warm Cream) is default, .dark (Dark Elegant) on */ :root { --c50:#fffdf8; --c100:#f5eddf; --c200:#efe4d2; --c300:#e6d9c3; --c400:#d4c4a8; --c500:#b9a584; --c600:#8d7c66; --c700:#6b5d4a; --c800:#4a3f30; --c900:#2c2017; --accent:#b35a30; --accent-soft:#f3e2d3; --accent-dark:#8a4424; --on-accent:#fffaf3; --shadow:rgba(80,45,20,0.20); --hero-a:#6b3a22; --hero-b:#9c5230; --hero-text:#fff7ee; --accent-glow:rgba(255,205,150,0.32); color-scheme: light; } :root.dark { --c50:#1f1b16; --c100:#16130f; --c200:#272219; --c300:#332d22; --c400:#4a3f30; --c500:#7a6b50; --c600:#9d9379; --c700:#b5a78e; --c800:#d4c9b5; --c900:#f1ebdf; --accent:#d6a444; --accent-soft:rgba(214,164,68,0.16); --accent-dark:#b8922e; --on-accent:#1a1509; --shadow:rgba(0,0,0,0.5); --hero-a:#241d12; --hero-b:#0d0a06; --hero-text:#f6efe0; --accent-glow:rgba(214,164,68,0.30); color-scheme: dark; } * { scrollbar-width: none; } *::-webkit-scrollbar { display: none; } html { scroll-behavior: smooth; } body { -webkit-tap-highlight-color: transparent; transition: background-color 0.3s, color 0.3s; } .cat-tab { transition: background 0.2s, color 0.2s, border-color 0.2s; } .cat-tab.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .food-card { transition: background 0.15s, border-color 0.15s, transform 0.15s; } .food-card:active { transform: scale(0.98); } .food-card.picked { background: var(--accent-soft); border-color: var(--accent); } .food-card.item-unavailable { opacity: 0.55; } .food-card.item-unavailable:active { transform: none; } .star-btn { transition: background 0.15s, color 0.15s, border-color 0.15s; } .modal-backdrop { animation: fadeIn 0.2s ease; } .modal-sheet { animation: slideUp 0.28s ease; } @keyframes fadeIn { from { opacity:0 } to { opacity:1 } } @keyframes slideUp { from { transform:translateY(40px); opacity:0 } to { transform:translateY(0); opacity:1 } } @keyframes popIn { from { transform:translateY(140%) scale(0.8); opacity:0 } to { transform:translateY(0) scale(1); opacity:1 } } .picks-fab { animation: popIn 0.28s ease; } .veg-dot { border-color: #1ba672; } .veg-dot span { background: #1ba672; } .nonveg-dot { border-color: #e23744; } .nonveg-dot span { background: #e23744; } .tag-chip { transition: background 0.15s, color 0.15s, border-color 0.15s; } .tag-chip.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } /* Hero banner animations */ @keyframes heroFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} } @keyframes heroSpin { to{transform:rotate(360deg)} } @keyframes heroShine { 0%{transform:translateX(-30px) rotate(18deg);opacity:0} 18%{opacity:.9} 55%{opacity:0} 100%{transform:translateX(190px) rotate(18deg);opacity:0} } @keyframes heroTwinkle { 0%,100%{opacity:.15;transform:scale(.6)} 50%{opacity:1;transform:scale(1.15)} } @keyframes heroBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} } .theme-toggle { transition: background 0.2s, color 0.2s, border-color 0.2s; }