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

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Lora:ital,wght@0,500;0,600;1,500&display=swap");

:root {
  --mb-orange: #F47C2C;
  --mb-yellow: #FFC72C;
  --mb-red: #E63946;
  --mb-ink: #0E1116;
}

html, body { height: 100%; }
body {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  color: var(--mb-ink);
  background: #FFF7E6;
  background-image:
    radial-gradient(1200px 600px at 10% 0%, rgba(244,124,44,0.22), transparent),
    radial-gradient(900px 500px at 90% 100%, rgba(255,199,44,0.20), transparent),
    radial-gradient(700px 400px at 50% 50%, rgba(251,154,46,0.10), transparent);
  background-attachment: fixed;
}

/* Warm scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #FFF7E6; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #F47C2C, #FFC72C);
  border-radius: 6px;
  border: 2px solid #FFF7E6;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #D6611B, #FB9A2E); }

/* Selection */
::selection { background: rgba(255,199,44,0.45); color: #4D1F03; }

/* Subtle SVG silhouette overlay (Magic Bus journey motif) */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("/journey.svg");
  background-repeat: no-repeat; background-position: bottom right;
  background-size: 720px auto;
  opacity: 0.06;
}
#__next, main { position: relative; z-index: 1; }