@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Emergent Gravity Visual Suite Styles
   Namespaced and scoped to avoid interfering with host website styles
   when attached to or living in the same namespace area as a parent site.
   ========================================================================== */

/* Standalone body or scoped container */
body.emergent-gravity-body,
.emergent-gravity-root,
.emergent-gravity-wrapper {
  font-family: 'Inter', sans-serif;
  background-color: #06080d;
  color: #e2e8f0;
}

body.emergent-gravity-body {
  overflow-x: hidden;
}

/* Monospace font utility */
body.emergent-gravity-body .font-mono,
.emergent-gravity-root .font-mono,
.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Responsive iframe integration */
body.emergent-gravity-body iframe,
.emergent-gravity-root iframe,
iframe.emergent-gravity-frame {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  transition: height 0.2s ease-out;
}

/* Custom dark scrollbar scoped to emergent gravity elements */
body.emergent-gravity-body::-webkit-scrollbar,
body.emergent-gravity-body ::-webkit-scrollbar,
.emergent-gravity-root::-webkit-scrollbar,
.emergent-gravity-root ::-webkit-scrollbar,
.emergent-gravity-wrapper::-webkit-scrollbar,
.emergent-gravity-wrapper ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.emergent-gravity-body::-webkit-scrollbar-track,
body.emergent-gravity-body ::-webkit-scrollbar-track,
.emergent-gravity-root::-webkit-scrollbar-track,
.emergent-gravity-root ::-webkit-scrollbar-track,
.emergent-gravity-wrapper::-webkit-scrollbar-track,
.emergent-gravity-wrapper ::-webkit-scrollbar-track {
  background: #090d16;
}

body.emergent-gravity-body::-webkit-scrollbar-thumb,
body.emergent-gravity-body ::-webkit-scrollbar-thumb,
.emergent-gravity-root::-webkit-scrollbar-thumb,
.emergent-gravity-root ::-webkit-scrollbar-thumb,
.emergent-gravity-wrapper::-webkit-scrollbar-thumb,
.emergent-gravity-wrapper ::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}

body.emergent-gravity-body::-webkit-scrollbar-thumb:hover,
body.emergent-gravity-body ::-webkit-scrollbar-thumb:hover,
.emergent-gravity-root::-webkit-scrollbar-thumb:hover,
.emergent-gravity-root ::-webkit-scrollbar-thumb:hover,
.emergent-gravity-wrapper::-webkit-scrollbar-thumb:hover,
.emergent-gravity-wrapper ::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* Card container styling */
.canvas-card,
.emergent-gravity-canvas-card {
  background: radial-gradient(circle at 50% 0%, #0d1322 0%, #070a12 100%);
  border: 1px solid #1a2336;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
}