global.css

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

@layer base {
  :root {
    --background: 240 3.23% 6.08%;
    --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%;
    /* Referral friend-status accents (Figma "Referral program — all invite states") */
    --referral-progress: 202.9 100% 71.18%;
    --referral-success: 142.96 61.5% 63.33%;
    /* #b39bff — brighter than --pale-purple (#a194eb), so it needs its own token */
    --referral-unlocking: 254.4 100% 80.4%;
  }

  /* 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: #000000;
    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);
}

.rotating-wheel-image {
  --landing-angle: 0deg;
  --spin-turns: 6turn;
  --spin-duration: 6s;
  --wheel-start-angle: 0deg;
  --wheel-cruise-angle: 0deg;
  --wheel-end-angle: 0deg;

  display: block;
  transform: rotate(var(--wheel-start-angle, 0deg));
  transform-origin: center center;
  will-change: transform;
}

.rotating-wheel-image.is-spinning {
  animation-name: rotating-wheel-spin;
  animation-duration: var(--spin-duration, 6s);
  animation-fill-mode: forwards;
}

@keyframes rotating-wheel-spin {
  0% {
    transform: rotate(var(--wheel-start-angle));
    animation-timing-function: cubic-bezier(0.45, 0, 0.8, 0.45);
  }

  12% {
    transform: rotate(calc(var(--wheel-start-angle) + 0.8turn));
    animation-timing-function: linear;
  }

  55% {
    transform: rotate(var(--wheel-cruise-angle));
    animation-timing-function: cubic-bezier(0.12, 0.65, 0.18, 1);
  }

  84% {
    transform: rotate(calc(var(--wheel-end-angle) - 18deg));
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  92% {
    transform: rotate(calc(var(--wheel-end-angle) + 6deg));
    animation-timing-function: ease-out;
  }

  97% {
    transform: rotate(calc(var(--wheel-end-angle) - 2deg));
    animation-timing-function: ease-in-out;
  }

  100% {
    transform: rotate(var(--wheel-end-angle));
  }
}