global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 7%;
    --foreground: 0 0% 100%;
    --card: 0 0% 11%;
    --card-hover: 0 0% 13%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 18.43%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 0, 0%, 19%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 0 0.02% 63.02%;
    --accent: 0 0% 18.43%;
    --accent-foreground: 0 0% 98%;
    --destructive: 358.76 100% 69.84%;
    --destructive-foreground: 0 0% 98%;
    --border: 344.55 3.72% 39.49%;
    --input: 0 0% 30%;
    --ring: 240 4.9% 83.9%;
    --brand: 109.04 81.56% 72.35%;
    --brand-foreground: 109.2 87.72% 22.35%;
    --points: 285 98% 80%;
    --button-dark: 0 0% 19%;
    --button-earning: 109 81% 72% / 0.2;
    --button-secondary: 0 0% 23%;
    --qr-background: 0 0% 27%;
    --modal-background: 0 0% 19%;
    --popup: 0 0% 6.27%;
    --purple: 270 39% 44%;
    --pale-purple: 249 68% 75%;
    --rewards: 44 100% 66%;
    --indigo: 255.2 78.12% 62.35%;
    --warning: 44.14 100% 65.88%;
  }

  /* Override Tailwind's default system stack on web */
  body {
    /* On web, use the family name registered by Expo Font */
    font-family:
      MonaSans_400Regular,
      ui-sans-serif,
      system-ui,
      -apple-system,
      'Segoe UI',
      Roboto,
      Helvetica,
      Arial,
      sans-serif;
  }

  /* Fill the viewport and keep a dark background under any bounce/overscroll */
  html,
  body,
  #root,
  #__next {
    height: 100%;
    background-color: #111111;
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
    color-scheme: dark;
  }

  /* React Native Web generates classes like .css-text-xxxxx for Text elements.
   * Ensure they use Mona Sans regardless of the default system stack. */
  /* React Native Web renders Text as span.css-xxxx. Force Mona on those. */
  [class^='css-text'],
  [class*=' css-text'],
  [class^='css-'],
  [class*=' css-'] {
    font-family:
      MonaSans_400Regular,
      ui-sans-serif,
      system-ui,
      -apple-system,
      'Segoe UI',
      Roboto,
      Helvetica,
      Arial,
      sans-serif !important;
  }

  /* Tailwind FontWeight overrides for Web to ensure correct font file usage */
  .font-extralight {
    font-family: MonaSans_200ExtraLight !important;
  }
  .font-light {
    font-family: MonaSans_300Light !important;
  }
  .font-normal {
    font-family: MonaSans_400Regular !important;
  }
  .font-medium {
    font-family: MonaSans_500Medium !important;
  }
  .font-semibold {
    font-family: MonaSans_600SemiBold !important;
  }
  .font-bold {
    font-family: MonaSans_700Bold !important;
  }
  .font-extrabold {
    font-family: MonaSans_800ExtraBold !important;
  }
  .font-black {
    font-family: MonaSans_900Black !important;
  }
}

.yield-box {
  width: 100%;
}

@media (max-width: 768px) {
  .yield-box {
    width: 50%;
  }

  /* On mobile, prevent the browser body from scrolling.
   * Scrolling should happen inside React Native Web scroll views instead,
   * so the bottom tab bar stays fixed and pages like KYC can scroll
   * independently without Safari dragging the whole document. */
  html,
  body,
  #root,
  #__next {
    overflow: hidden;
  }

  /* Raise Intercom launcher by 80px on mobile */
  .intercom-launcher {
    bottom: 100px !important;
  }
}

/* Bounce animation for dialog on web */
@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(25px);
  }
  60% {
    opacity: 1;
    transform: translateY(-5px);
  }
  80% {
    transform: translateY(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.bounce-in-down {
  animation: bounceInDown 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}