/* ===========================
   NOGHOST — DARK LANDING OVERRIDE
   Extends globals.css with dark theme overrides
   for the public marketing landing page.
   =========================== */

:root {
  /* Dark background layers */
  --background:       #080c14;
  --foreground:       #e8f0fe;

  /* Primary — dark surface */
  --primary:          #0ea5e9;
  --primary-foreground: #ffffff;

  /* Accent — electric blue */
  --accent:           #4f8ef7;
  --accent-foreground: #ffffff;
  --accent-muted:     rgba(79,142,247,0.12);
  --accent-border:    rgba(79,142,247,0.25);
  --accent-glow:      rgba(79,142,247,0.15);

  /* Muted / secondary */
  --muted:            #0f1623;
  --muted-foreground: #8899aa;

  /* Surfaces */
  --card:             #0f1623;
  --card-foreground:  #e8f0fe;
  --popover:          #0f1623;
  --popover-foreground: #e8f0fe;

  /* Borders */
  --border:           #1e2d45;
  --border-strong:    #2a3a55;
  --input:            #1e2d45;
  --input-focus:      #4f8ef7;
  --ring:             rgba(79,142,247,0.35);

  /* Text hierarchy */
  --text-primary:     #e8f0fe;
  --text-secondary:    #8899aa;
  --text-muted:       #4a5a6a;
  --text-placeholder:  #3a4a5a;

  /* Semantic */
  --destructive:      #ef4444;
  --success:          #34d399;
  --warning:          #f59e0b;

  /* Card background for body */
  background: var(--background);
}

body {
  background: var(--background);
  color: var(--text-primary);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(79,142,247,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,142,247,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

.container, .container-sm { position: relative; z-index: 1; }

/* Buttons — dark variants */
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-hover, #6ba3ff); box-shadow: 0 8px 24px rgba(79,142,247,0.3); }

.btn-secondary {
  background: var(--card);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover { background: var(--muted); border-color: var(--accent); }

/* Card — dark surface */
.card {
  background: var(--card);
  border: 1px solid var(--border);
}

.nav {
  background: rgba(8,12,20,0.85);
  border-bottom: 1px solid var(--border);
}

.nav-links a { color: var(--text-muted); }
.nav-links a:hover { color: var(--text-primary); }

/* Input — dark variant */
.input, select, textarea {
  background: var(--muted);
  border-color: var(--border);
  color: var(--text-primary);
}
.input::placeholder { color: var(--text-placeholder); }
.input:focus, select:focus, textarea:focus { border-color: var(--input-focus); box-shadow: var(--focus-ring); }

/* Badges — dark */
.badge-neutral { background: var(--muted); color: var(--text-muted); border-color: var(--border); }
.badge-success { background: rgba(52,211,153,0.12); color: #34d399; border-color: rgba(52,211,153,0.25); }
.badge-warning { background: rgba(245,158,11,0.12); color: #f59e0b; border-color: rgba(245,158,11,0.25); }
.badge-danger  { background: rgba(239,68,68,0.12); color: #ef4444; border-color: rgba(239,68,68,0.25); }

/* Table — dark */
th { background: var(--muted); color: var(--text-muted); border-bottom-color: var(--border); }
td { border-bottom-color: var(--border); color: var(--text-secondary); }
tbody tr:hover td { background: var(--muted); }

/* Divider */
.divider, .section-divider { background: var(--border); }

/* Modal */
.modal { background: var(--card); border-color: var(--border); }
.modal-backdrop { background: rgba(0,0,0,0.65); }
.modal-footer { border-top-color: var(--border); }

/* Alert dark variants */
.alert-success { background: rgba(52,211,153,0.08); border-color: rgba(52,211,153,0.2); color: #34d399; }
.alert-warning  { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.2); color: #f59e0b; }
.alert-danger   { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2); color: #ef4444; }

/* Focus ring override */
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(79,142,247,0.35); }

/* Landing-specific section labels */
.section-label { color: var(--accent); }
a { color: var(--accent); }
a:hover { color: #6ba3ff; }

/* Product explainer accent line */
.product-visual::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.6;
}

/* Feature card glow on hover */
.feature-card { background: var(--card); border-color: var(--border); }
.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, var(--accent-glow), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.feature-card:hover { border-color: rgba(79,142,247,0.4); }
.feature-card:hover::after { opacity: 1; }

/* Feature icon */
.feature-icon { background: var(--accent-muted); border-color: var(--accent-border); }
.feature-icon svg { stroke: var(--accent); }

/* Pricing card */
.pricing-card { background: var(--card); border-color: var(--border); }
.pricing-card.featured { border-color: var(--accent); }

/* Trust section */
.trust-section { background: var(--card); border-color: var(--border); }
.trust-icon { background: var(--accent-muted); border-color: var(--accent-border); }
.trust-icon svg { stroke: var(--accent); }

/* FAQ */
.faq-item { background: var(--card); border-color: var(--border); }
.faq-question { color: var(--text-primary); }
.faq-question:hover { color: var(--accent); }
.faq-chevron { stroke: var(--text-muted); }
.faq-item.open .faq-chevron { stroke: var(--accent); }

/* Footer */
.footer { border-top-color: var(--border); }
.footer-logo { color: var(--text-primary); }
.footer-logo svg { fill: var(--accent); }
.footer-links a { color: var(--text-muted); }
.footer-links a:hover { color: var(--text-primary); }
.footer-copy { color: var(--text-muted); }

/* Mobile nav */
.nav-links.mobile-open {
  background: rgba(8,12,20,0.97);
  border-bottom-color: var(--border);
}

@media (max-width: 768px) {
  .nav { background: rgba(8,12,20,0.97); }
}