/* morphic.css — Morphic Theme overlay for Nexus AI sites
 * Loads AFTER tailwind.css. Overrides the violet/purple palette to the
 * Living Abyss cyan palette, swaps fonts, and tunes glow + border treatments
 * so the marketing site and portal match the MorphicOS shell.
 *
 * Brand tokens:
 *   --abyss      #07060F   void ground
 *   --void       #0D0B1A   panel surface
 *   --void-e     #14102B   elevated surface
 *   --cyan       #00F5FF   primary accent
 *   --cyan-soft  rgba(0,245,255,0.16)
 *   --violet     #8A6FFF   secondary accent
 *   --ember      #FFB266   sovereign spark
 *   --text       #E8E0FF
 *   --text-d     #B8A8E0
 *   --text-m     #6B5F8E
 *   --hairline   rgba(184,168,224,0.10)
 *   --hairline-s rgba(184,168,224,0.22)
 *
 * Type:
 *   Space Grotesk — body, headings, wordmark
 *   JetBrains Mono — code, data, eyebrows, audit
 */

:root {
  --abyss:      #07060F;
  --void:       #0D0B1A;
  --void-e:     #14102B;
  --cyan:       #00F5FF;
  --cyan-soft:  rgba(0,245,255,0.16);
  --cyan-faint: rgba(0,245,255,0.06);
  --violet:     #8A6FFF;
  --ember:      #FFB266;
  --text:       #E8E0FF;
  --text-d:     #B8A8E0;
  --text-m:     #6B5F8E;
  --hairline:        rgba(184,168,224,0.10);
  --hairline-s:      rgba(184,168,224,0.22);
}

html, body {
  font-family: 'Space Grotesk', -apple-system, system-ui, sans-serif !important;
  background: var(--abyss) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
}

/* Living abyss backdrop — replaces .abyss-mist */
.abyss-mist {
  background-color: var(--abyss) !important;
  background-image:
    radial-gradient(1000px 700px at 50% 0%, rgba(74,44,143,0.20), transparent 65%),
    radial-gradient(1200px 800px at 15% 110%, rgba(0,245,255,0.06), transparent 60%),
    radial-gradient(900px 600px at 90% -10%, rgba(138,111,255,0.10), transparent 60%) !important;
}
.abyss-mist::before {
  /* subtle mist drift */
  content: ''; position: fixed; inset: -10%; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 30% at 25% 30%, rgba(0,245,255,0.05), transparent 70%),
    radial-gradient(35% 25% at 75% 60%, rgba(138,111,255,0.08), transparent 70%);
  filter: blur(40px);
  animation: morphic-mist 28s ease-in-out infinite alternate;
}
@keyframes morphic-mist {
  from { transform: translate3d(0,0,0) rotate(0deg); }
  to   { transform: translate3d(2%, -1%, 0) rotate(6deg); }
}
.abyss-mist > * { position: relative; z-index: 1; }

/* Glass — frosted void instead of violet */
.glass {
  background: rgba(13,11,26,0.55) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  border: 1px solid var(--hairline-s) !important;
}

/* Gradients */
.gradient-bg {
  background: linear-gradient(135deg, #00F5FF 0%, #8A6FFF 100%) !important;
  color: #07060F !important;
}
.gradient-text {
  background: linear-gradient(135deg, #00F5FF 0%, #C2B1FF 60%, #FFB266 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}

/* Featured pricing tier */
.tier-card.featured {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 60px -10px rgba(0,245,255,0.45) !important;
}
.tier-card.featured::before {
  background: linear-gradient(135deg, #00F5FF, #8A6FFF) !important;
  color: #07060F !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 600 !important;
}

/* Compliance badges → cyan green family */
.compliance-badge {
  background: rgba(0,245,255,0.08) !important;
  color: var(--cyan) !important;
  border: 1px solid rgba(0,245,255,0.32) !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.12em !important;
}
.compliance-badge > span { background: var(--cyan) !important; }

/* Card hover */
.card { transition: transform 280ms cubic-bezier(.5,1.6,.4,1), border-color 280ms, box-shadow 280ms !important; }
.card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(0,245,255,0.45) !important;
  box-shadow: 0 20px 40px -12px rgba(0,245,255,0.30) !important;
}

/* Pulse dot — cyan instead of violet */
.pulse-dot { background: var(--cyan) !important; }

/* ──────────── Tailwind utility overrides (violet/purple → cyan) ──────────── */

/* text-violet-* */
.text-violet-200, .text-violet-300, .text-violet-400 { color: var(--cyan) !important; }
.text-violet-500 { color: var(--cyan) !important; }
.text-purple-300, .text-purple-400 { color: var(--cyan) !important; }

/* bg-violet-* */
.bg-violet-500\/10, .bg-violet-500\/15, .bg-violet-500\/20 { background-color: rgba(0,245,255,0.10) !important; }
.bg-violet-900\/30, .bg-violet-900\/40 { background-color: rgba(13,11,26,0.55) !important; }

/* border-violet-* */
.border-violet-500\/30, .border-violet-500\/40 { border-color: rgba(0,245,255,0.30) !important; }
.border-violet-900\/20, .border-violet-900\/30, .border-violet-900\/40 { border-color: var(--hairline) !important; }

/* hover variants */
.hover\:bg-violet-500\/10:hover { background-color: rgba(0,245,255,0.10) !important; }
.hover\:shadow-violet-700\/50:hover,
.hover\:shadow-violet-700\/60:hover { box-shadow: 0 14px 36px -10px rgba(0,245,255,0.40) !important; }
.hover\:text-white:hover { color: var(--text) !important; }

/* shadow-violet */
.shadow-violet-900\/30, .shadow-violet-900\/40, .shadow-violet-900\/50 {
  box-shadow: 0 18px 40px -16px rgba(0,245,255,0.30) !important;
}

/* slate text → text-d / text-m */
.text-slate-300 { color: var(--text-d) !important; }
.text-slate-400 { color: var(--text-m) !important; }
.text-slate-500 { color: var(--text-m) !important; }
.text-slate-200 { color: var(--text) !important; }

/* slate bg → void */
.bg-slate-900\/60, .bg-slate-900\/80, .bg-slate-950\/40, .bg-slate-950\/80 { background-color: rgba(13,11,26,0.6) !important; }
.bg-slate-900 { background-color: var(--void) !important; }

/* divider violet → hairline */
.divide-violet-900\/30 > * { border-color: var(--hairline) !important; }

/* emerald (compliance OK) — keep visible green that harmonizes with cyan */
.text-emerald-400 { color: #00FF88 !important; }
.bg-emerald-400 { background-color: #00FF88 !important; }
.border-emerald-400\/40 { border-color: rgba(0,255,136,0.4) !important; }
.bg-emerald-400\/10 { background-color: rgba(0,255,136,0.10) !important; }

/* amber (used in code highlight) → ember */
.text-amber-300 { color: var(--ember) !important; }

/* inputs */
input[type="text"], input[type="email"], input[type="password"],
select, textarea {
  background-color: rgba(7,6,15,0.6) !important;
  border-color: var(--hairline-s) !important;
  color: var(--text) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  transition: border-color 160ms, box-shadow 160ms;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,245,255,0.10) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--text-m) !important; }

label.uppercase, .text-xs.uppercase {
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.14em !important;
}

/* monospace surfaces */
code, .mono, pre {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

/* table headers (audit) */
thead.bg-violet-900\/30, .bg-violet-900\/30 {
  background-color: rgba(13,11,26,0.65) !important;
  border-bottom: 1px solid var(--hairline-s);
}
thead .text-violet-200 { color: var(--cyan) !important; }

/* table row hover */
.audit-row:hover { background-color: rgba(0,245,255,0.06) !important; }

/* ──────────── Nav brand block ──────────── */
nav .gradient-bg, header .gradient-bg {
  background: transparent !important;
  border: 1px solid rgba(0,245,255,0.30) !important;
  box-shadow: 0 0 16px rgba(0,245,255,0.20);
}
nav .gradient-bg > span, header .gradient-bg > span,
.brand-letter { display: none !important; }
.brand-letter { display: none !important; }

.brand-mark {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(7,6,15,0.6);
  border: 1px solid rgba(0,245,255,0.30);
  border-radius: 10px;
  box-shadow: 0 0 14px rgba(0,245,255,0.18), inset 0 0 14px rgba(0,245,255,0.06);
  flex-shrink: 0;
}
.brand-mark svg { display: block; }

/* Buttons that use gradient-bg get tightened type */
.gradient-bg, [class*="gradient-bg"] {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
}

/* ──────────── Living Abyss WebGL canvas ──────────── */
#abyss-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* When the abyss canvas is present, kill the static gradient on .abyss-mist
   (the shader provides the visual; we only need a faint dark veil for readability) */
body.has-abyss .abyss-mist,
body.has-abyss {
  background-color: transparent !important;
  background-image: none !important;
}
body.has-abyss .abyss-mist::before,
body.has-abyss .abyss-mist::after {
  display: none !important;
}
/* Soft readability veil over the shader, only where needed for content sections */
body.has-abyss::before {
  content: ''; position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,6,15,0.55), rgba(7,6,15,0.30) 30%, rgba(7,6,15,0.30) 70%, rgba(7,6,15,0.55));
}
/* Everything in the page should sit above the canvas + veil */
body.has-abyss > *:not(#abyss-canvas) { position: relative; z-index: 1; }

/* Selection */
::selection { background: var(--cyan); color: var(--abyss); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(184,168,224,0.15); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(184,168,224,0.3); }

/* Section borders */
.border-violet-900\/30 + section, section.border-t.border-violet-900\/30 {
  border-color: var(--hairline) !important;
}

/* Cap "MOST CHOSEN" ribbon for featured tier — reposition + restyle */
.tier-card.featured::before {
  letter-spacing: 0.18em !important;
}

/* Audit log mono fix */
.mono { font-feature-settings: "tnum" !important; }

/* Sticky header gets thin morphic frosted look */
nav.sticky, header.sticky {
  background: rgba(7,6,15,0.78) !important;
  border-color: var(--hairline-s) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
}

/* Hero pulse dot color */
.pulse, .pulse-dot { background-color: var(--cyan) !important; box-shadow: 0 0 8px var(--cyan); }