@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap');

:root {
  --color-bun: #F5E1C1;
  --color-lettuce: #8BC34A;
  --color-tomato: #E53935;
  --color-cheese: #FFD400;
  --color-roast: #6D4C41;
  --color-pickle: #388E3C;
  --color-sauce: #FFFFFF;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--color-bun);
  color: var(--color-roast);
  overflow-x: hidden;
  margin: 0;
}

.admin-grid {
  background-image: radial-gradient(var(--color-roast) 0.5px, transparent 0.5px);
  background-size: 24px 24px;
  opacity: 0.05;
}

@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.animate-scaleIn {
  animation: scaleIn 0.2s ease-out forwards;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.animate-shake {
  animation: shake 0.2s ease-in-out 0s 2;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bun);
}

::-webkit-scrollbar-thumb {
  background: var(--color-roast);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #5d4037;
}