/* Tapau Time - Takeaway (Default Deep Teal) Theme */
:root, body.mode-tapau {
  --color-primary: #00535b;
  --color-primary-container: #006d77;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #9becf7;
  --color-secondary: #885200;
  --color-secondary-container: #fe9d00;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #653c00;
  --color-tertiary: #01544f;
  --color-tertiary-container: #286d67;
  --color-on-tertiary: #ffffff;
  --color-on-tertiary-container: #a9ece4;
  --hero-gradient: linear-gradient(135deg, var(--color-primary, #00535b) 0%, var(--color-primary-container, #006d77) 100%);
  --hero-tag-bg: rgba(255, 255, 255, 0.2);
  --btn-radius: 9999px;
  --color-surface: #f8f9fa;
  --color-surface-dim: #d9dadb;
  --color-surface-bright: #f8f9fa;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f3f4f5;
  --color-surface-container: #edeeef;
  --color-surface-container-high: #e7e8e9;
  --color-surface-container-highest: #e1e3e4;
  --color-on-surface: #191c1d;
  --color-on-surface-variant: #3e494a;
  --color-outline: #6f797a;
  --color-outline-variant: #bec8ca;
  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;
  --color-on-error: #ffffff;
  --color-on-error-container: #93000a;
}

/* Dine-In Accent Accoutrements */
body.mode-dinein {
  --color-surface: #fbf9f8;
  --color-surface-low: #f6f3f0;
  --color-surface-container: #eee9e5;
}

/* Smooth color transitions */
body, header, nav, button, .hero-card, .bg-primary, .bg-primary-container, .text-primary {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Dark mode / Merchant KDS theme overrides */
.dark, [data-theme="dark"] {
  --color-surface: #121212;
  --color-surface-dim: #0a0a0a;
  --color-surface-bright: #1e1e1e;
  --color-surface-container-lowest: #181818;
  --color-surface-container-low: #1e1e1e;
  --color-surface-container: #242424;
  --color-surface-container-high: #2a2a2a;
  --color-surface-container-highest: #333333;
  --color-on-surface: #f0f1f2;
  --color-on-surface-variant: #bec8ca;
  --color-outline: #889395;
  --color-outline-variant: #3e494a;
  --color-primary: #82d3de;
  --color-on-primary: #00363c;
  --color-primary-container: #004f56;
  --color-on-primary-container: #9becf7;
}

/* Base resets & smooth scrolling */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  overscroll-behavior-y: contain;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Safe area padding utilities */
.pb-safe {
  padding-bottom: max(env(safe-area-inset-bottom, 16px), 16px);
}
.pt-safe {
  padding-top: env(safe-area-inset-top, 0px);
}

/* Hide scrollbar */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Animations */
@keyframes flyCart {
  0% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
  50% {
    transform: scale(1.4) translate(-20px, -40px);
    opacity: 0.9;
  }
  100% {
    transform: scale(0.2) translate(var(--dx), var(--dy));
    opacity: 0;
  }
}

.animate-fly {
  animation: flyCart 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes pulseGlow {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.2;
  }
}

.animate-glow {
  animation: pulseGlow 2.4s ease-in-out infinite;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-up {
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in {
  animation: fadeIn 0.25s ease-out forwards;
}

/* Material symbols fine tuning */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
}

.material-symbols-outlined.fill {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Custom interactive ripple / click animation */
.touch-press {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
}
.touch-press:active {
  transform: scale(0.96);
  opacity: 0.9;
}

/* Barcode simulation pattern */
.barcode-stripes {
  background: repeating-linear-gradient(
    90deg,
    #191c1d,
    #191c1d 3px,
    transparent 3px,
    transparent 6px,
    #191c1d 6px,
    #191c1d 10px,
    transparent 10px,
    transparent 12px,
    #191c1d 12px,
    #191c1d 14px
  );
}

/* Floating cart bar blur */
.glass-panel {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.dark .glass-panel {
  background: rgba(24, 24, 24, 0.88);
}