/* ========================================================
   Roam Master Design System Tokens & Base Styles
   ======================================================== */
:root {
  --bg-royal: #0a46d1;
  --bg-royal-deep: #052985;
  --card-yellow: #f5bc14;
  --card-text-primary: #0f172a;
  --card-text-secondary: #334155;
  --card-border-subtle: rgba(15, 23, 42, 0.08);
  --card-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.28), 0 8px 16px -6px rgba(0, 0, 0, 0.16);
  --grid-line: rgba(255, 255, 255, 0.07);
  --status-red: #ef4444;
  --status-blue: #1d4ed8;
  --status-green: #10b981;
  --status-amber: #f59e0b;
  --mouse-x: 50vw;
  --mouse-y: 50vh;
}

* {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  box-sizing: border-box;
}

body.roam-theme {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: var(--bg-royal);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-x: hidden;
  position: relative;
}

/* ========================================================
   CALM ATMOSPHERIC BACKGROUND CANVAS
   Quiet technical grid + soft ambient depth blur
   ======================================================== */
.roam-ambient-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(circle at center, #0a46d1 30%, var(--bg-royal-deep) 100%);
}

.roam-blur-orb-blue {
  position: absolute;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.30) 0%, rgba(10, 70, 209, 0) 70%);
  filter: blur(100px);
  transform: translate3d(calc(var(--mouse-x, 50vw) * 0.12), calc(var(--mouse-y, 50vh) * 0.12), 0);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  top: -150px;
  left: 10%;
  will-change: transform;
}

.roam-blur-orb-amber {
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 188, 20, 0.10) 0%, rgba(245, 188, 20, 0) 70%);
  filter: blur(120px);
  transform: translate3d(calc(var(--mouse-x, 50vw) * -0.08), calc(var(--mouse-y, 50vh) * -0.08), 0);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  bottom: -150px;
  right: 15%;
  will-change: transform;
}

.roam-quiet-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
  background-position: center center;
  opacity: 0.85;
}

.roam-soft-spotlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 500px at var(--mouse-x, 50vw) var(--mouse-y, 50vh), rgba(255, 255, 255, 0.05) 0%, transparent 75%);
  pointer-events: none;
}

.roam-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 40%, rgba(5, 41, 133, 0.6) 90%);
  pointer-events: none;
}

/* ========================================================
   SPATIAL SLIDING ANIMATIONS (ABSOLUTE BAN ON FADING)
   High-precision hardware-accelerated mechanical easing
   ======================================================== */
@keyframes roam-slide-down {
  0% { transform: translate3d(0, -100%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes roam-view-slide-in {
  0% { transform: translate3d(0, 18px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes roam-slide-in-right {
  0% { transform: translate3d(24px, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes roam-slide-in-left {
  0% { transform: translate3d(-24px, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes roam-slide-down-panel {
  0% { transform: translate3d(0, -12px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes roam-slide-up-bottom {
  0% { transform: translate3d(0, 100%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes roam-slide-down-bottom {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, 100%, 0); }
}