:root {
  --color-primary: transparent;
  --color-primary-light: transparent;
  --color-primary-muted: transparent;
  --color-secondary: transparent;
  --color-accent: transparent;
  --color-background: #FFFFFF;
  --color-surface: #FFFFFF;
  --theme-border-radius: 8px;
  --font-heading: 'Inter';
  --font-body: 'Inter';
}

body {
  background-color: #FFFFFF;
  color: #111827;
  font-family: var(--font-body), sans-serif;
  
  /* --- Native App Experience Enhancements --- */
  /* Remove tap highlights on iOS/Android */
  -webkit-tap-highlight-color: transparent;
  
  /* Prevent overscroll bounce showing ugly white/grey backgrounds */
  overscroll-behavior-y: none;
  
  /* Prevent text selection (makes UI feel like a solid native app) */
  -webkit-user-select: none;
  user-select: none;
}

/* Allow text selection only in input fields & textareas */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: auto;
  user-select: auto;
}

/* Add safe-area padding for modern iPhones (Notch/Dynamic Island & Home Indicator) */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}
.pt-safe {
  padding-top: env(safe-area-inset-top);
}

/* Ensure headings use the smart font pairing */
h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-heading), sans-serif;
}


.bg-brand-tint {
  background-color: var(--color-primary-light);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.snap-x-mandatory {
  scroll-snap-type: x mandatory;
}

.snap-center {
  scroll-snap-align: center;
}

/* ============================================================
   THEME BORDER RADIUS — makes merchant's shape choice apply everywhere
   Overrides Tailwind rounded-* classes with the dynamic CSS variable.
   rounded-full is intentionally excluded (circular avatars/badges).
   ============================================================ */
.rounded:not([data-no-shape]), .rounded-sm:not([data-no-shape]), .rounded-md:not([data-no-shape]), .rounded-lg:not([data-no-shape]),
.rounded-xl:not([data-no-shape]), .rounded-2xl:not([data-no-shape]), .rounded-3xl:not([data-no-shape]), .rounded-full:not([data-no-shape]) {
  border-radius: var(--theme-border-radius);
}

button:not([data-no-shape]), input:not([data-no-shape]), textarea:not([data-no-shape]), select:not([data-no-shape]) {
  border-radius: var(--theme-border-radius);
}