/* Naava GlowJourney — front-end stylesheet
 * Sets up the root container so the React app can render at full mobile
 * viewport inside any theme. The chunky-Gen-Z visual system lives mostly
 * inline in components.jsx; this file owns the host-level scaffolding
 * (CSS custom properties, the centered phone preview on desktop, the
 * login gate, font smoothing).
 */

:root {
  --na-ink:       #0E2A1F;
  --na-forest:    #0E2A1F;
  --na-leaf:      #C8FF3D;
  --na-leaf-deep: #A6E024;
  --na-coral:     #FF6B6B;
  --na-butter:    #FFD93D;
  --na-lavender:  #DDD6FE;
  --na-sky:       #B8E5FF;
  --na-cream:     #FFF8EC;
  --na-pearl:     #FFFDF7;
  --na-paper:     #FFFFFF;
  --na-muted:     #5A6C61;

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --serif:   "Instrument Serif", ui-serif, Georgia, serif;
  --body:    "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:    "Space Mono", ui-monospace, monospace;

  --shadow-pop:    4px 4px 0 var(--na-ink);
  --shadow-pop-lg: 6px 6px 0 var(--na-ink);
  --shadow-pop-sm: 2px 2px 0 var(--na-ink);
}

/* Root container — fills viewport on mobile, frames a preview on desktop. */
.naava-gj-root,
.naava-gj-root * {
  box-sizing: border-box;
}
.naava-gj-root {
  font-family: var(--body);
  color: var(--na-ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(60% 40% at 10% 0%, #DDD6FE 0%, transparent 50%),
    radial-gradient(50% 40% at 90% 100%, #FFD93D 0%, transparent 50%),
    radial-gradient(80% 40% at 50% 50%, #C8FF3D 0%, transparent 60%),
    var(--na-cream);
}
.naava-gj-root button { font-family: inherit; color: inherit; }
.naava-gj-root .na-scroll::-webkit-scrollbar { width: 0; height: 0; }
.naava-gj-root .na-scroll { scrollbar-width: none; }

/* Animations used across the app */
@keyframes naWobble { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes naFloat  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes naSpin   { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes naPulse  { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes naScan   { 0% { top: -10%; } 100% { top: 110%; } }
@keyframes naShine  { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }
@keyframes naBlink  { 0%, 90%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

/* ────────────────────────────────────────────────────────────
 * Login gate (rendered server-side when require_login = true)
 * ──────────────────────────────────────────────────────────── */

.naava-gj-gate {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  font-family: var(--body);
  color: var(--na-ink);
  background:
    radial-gradient(60% 40% at 10% 0%, #DDD6FE 0%, transparent 50%),
    radial-gradient(50% 40% at 90% 100%, #FFD93D 0%, transparent 50%),
    var(--na-cream);
}
.naava-gj-gate-card {
  width: 100%; max-width: 440px;
  background: #fff;
  border: 2.5px solid var(--na-ink);
  border-radius: 28px;
  box-shadow: var(--shadow-pop-lg);
  padding: 36px 28px;
  text-align: center;
}
.naava-gj-gate-emoji {
  font-size: 56px; line-height: 1;
  display: inline-block;
  background: var(--na-leaf);
  border: 2.5px solid var(--na-ink);
  border-radius: 999px;
  padding: 14px 18px;
  transform: rotate(-6deg);
  box-shadow: var(--shadow-pop);
  margin-bottom: 18px;
}
.naava-gj-gate h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -1px;
  margin: 0 0 8px;
}
.naava-gj-gate p { margin: 0 0 18px; color: var(--na-muted); line-height: 1.5; font-size: 14px; }
.naava-gj-gate-small { font-size: 12px !important; opacity: .7; margin-top: 16px !important; }
.naava-gj-gate-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.naava-gj-btn {
  display: inline-block;
  padding: 14px 22px; border-radius: 999px;
  font-family: var(--display);
  font-weight: 700; font-size: 15px;
  text-decoration: none !important;
  border: 2.5px solid var(--na-ink);
  box-shadow: var(--shadow-pop);
  transition: transform .12s ease, box-shadow .12s ease;
}
.naava-gj-btn:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-pop-lg); }
.naava-gj-btn:active { transform: translate(3px, 3px); box-shadow: var(--shadow-pop-sm); }
.naava-gj-btn-primary { background: var(--na-leaf); color: var(--na-ink); }
.naava-gj-btn-ghost   { background: #fff;          color: var(--na-ink); }