/**
 * Nimbus Connect UI brand layer
 * Warm dark shell matching thenimbus product — never a blank white page.
 */

:root {
  color-scheme: dark;
  --nimbus-bg: #0c0b0a;
  --nimbus-surface: #13110f;
  --nimbus-surface-2: #1a1714;
  --nimbus-text: #f2ece3;
  --nimbus-muted: rgba(242, 236, 227, 0.62);
  --nimbus-faint: rgba(242, 236, 227, 0.42);
  --nimbus-border: rgba(242, 236, 227, 0.1);
  --nimbus-accent: #f0a500;
  --nimbus-accent-soft: rgba(240, 165, 0, 0.2);
  --nimbus-radius: 16px;
  --nimbus-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

html,
body {
  background: var(--nimbus-bg) !important;
  color: var(--nimbus-text) !important;
  font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif !important;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

body {
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(240, 165, 0, 0.1), transparent 55%),
    radial-gradient(700px 360px at 85% 110%, rgba(240, 165, 0, 0.05), transparent 50%),
    var(--nimbus-bg) !important;
}

/* Top brand chip */
#nimbus-brand-bar {
  position: fixed;
  top: 16px;
  left: 18px;
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  user-select: none;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  background: rgba(19, 17, 15, 0.72);
  border: 1px solid var(--nimbus-border);
  backdrop-filter: blur(10px);
}

#nimbus-brand-bar .nimbus-mark {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #15110c;
  background: linear-gradient(180deg, #f6b724, #e09000);
  box-shadow: 0 4px 14px rgba(224, 144, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

#nimbus-brand-bar .nimbus-word {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--nimbus-text);
}

/* Root mount: give the Connect app room under brand chip */
#root {
  min-height: 100vh;
  box-sizing: border-box;
  padding-top: 8px;
}

/* Focus rings → gold */
#root :focus-visible {
  outline: 2px solid var(--nimbus-accent) !important;
  outline-offset: 2px;
}

/* Soften stock white panels if they appear */
#root [class*="bg-white"],
#root [class*="bg-slate-50"],
#root [class*="bg-gray-50"] {
  background-color: var(--nimbus-surface) !important;
  color: var(--nimbus-text) !important;
}

#root [class*="text-gray-"],
#root [class*="text-slate-"],
#root [class*="text-zinc-"] {
  color: var(--nimbus-muted) !important;
}

#root [class*="border-gray"],
#root [class*="border-slate"],
#root [class*="border-zinc"] {
  border-color: var(--nimbus-border) !important;
}

/* Primary actions toward Nimbus gold when stock primary is blue-ish */
#root button[class*="bg-blue"],
#root a[class*="bg-blue"],
#root button[class*="bg-indigo"],
#root a[class*="bg-indigo"] {
  background: linear-gradient(180deg, #f6b724, #e09000) !important;
  color: #15110c !important;
  border-color: transparent !important;
  box-shadow: 0 8px 20px rgba(224, 144, 0, 0.28);
}

#root button[class*="bg-blue"]:hover,
#root a[class*="bg-blue"]:hover,
#root button[class*="bg-indigo"]:hover,
#root a[class*="bg-indigo"]:hover {
  filter: brightness(1.04);
}

/* Cards */
#root [class*="rounded-xl"],
#root [class*="rounded-2xl"],
#root [class*="rounded-lg"] {
  border-color: var(--nimbus-border);
}

/* Hide stock Nango marketing watermarks / “powered by” */
#root a[href*="nango.dev"],
#root [class*="watermark"] {
  display: none !important;
}

/* Mobile: brand chip smaller */
@media (max-width: 480px) {
  #nimbus-brand-bar {
    top: 12px;
    left: 12px;
  }
  #root {
    padding-top: 4px;
  }
}