/*
 * Unified Color Palette
 *
 * This override file unifies the entire site onto a single dark navy base
 * with one bright cyan accent. It removes clashing gradients and ensures
 * buttons, badges, headings and highlights all share the same look.
 * Everything in this file is scoped with CSS variables defined on :root
 * and uses !important sparingly to override existing inline styles.
 */

/* Core palette variables */
:root {
  /* deep navy background for pages */
  --nk-navy: #081c2e;
  /* single bright accent for all calls to action – slightly more saturated for greater contrast */
  --nk-accent: #23e0ff;
  /* muted off‑white for general text on dark backgrounds */
  /* lighten the primary text colour slightly for improved contrast on very dark surfaces */
  --nk-text: #f1fafe;
  /* soften secondary copy and bump the alpha for better legibility */
  --nk-muted: rgba(241, 250, 254, 0.90);
  /* unify all legacy accent variables to the same colour */
  --aqua: var(--nk-accent);
  --indigo: var(--nk-accent);
  --coral: var(--nk-accent);
  --nk-cyan: var(--nk-accent);
  --nk-purple: var(--nk-accent);
  --nk-surface: #0d2540;
  --nk-surface-2: #112b4a;
  --nk-surface-3: #152f52;
}

/* Page background and text */
body {
  background: var(--nk-navy) !important;
  color: var(--nk-text) !important;
}

/* Standardise cards and surfaces on dark backgrounds */
.card,
.nk-card,
.postcard-card,
.pricing-tier,
.price-card,
.package-card,
.feature-band,
#roi .card,
#roi .roi-panel,
#roi .metrics-grid .card {
  background: var(--nk-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  color: var(--nk-text) !important;
}

/* unify footer background */
footer {
  background: var(--nk-navy) !important;
  color: var(--nk-text) !important;
}

/* Primary buttons: solid accent background with dark text */
.btn,
.btn-primary,
.button,
.nk-btn {
  background-image: none !important;
  background-color: var(--nk-accent) !important;
  color: var(--nk-navy) !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}
.btn:hover,
.btn-primary:hover,
.button:hover,
.nk-btn:hover {
  filter: brightness(1.1) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important;
  transform: translateY(-2px) !important;
}

/* Outlined buttons: transparent background with accent border */
.btn-outline,
.button.btn-outline {
  background: transparent !important;
  color: var(--nk-accent) !important;
  border: 2px solid var(--nk-accent) !important;
  box-shadow: none !important;
}
.btn-outline:hover,
.button.btn-outline:hover {
  background: rgba(6, 182, 212, 0.1) !important;
  border-color: var(--nk-accent) !important;
  color: var(--nk-accent) !important;
}

/* Badges and pills: translucent accent backgrounds */
.badge,
.pill,
.hero-badge {
  background: rgba(6, 182, 212, 0.15) !important;
  color: var(--nk-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.badge.active,
.pill.active {
  background: var(--nk-accent) !important;
  color: var(--nk-navy) !important;
}

/* Headings with accent highlights */
h1 .accent,
h2 .accent,
h3 .accent,
span.accent {
  background-image: none !important;
  color: var(--nk-accent) !important;
}

/* Remove hero radial glows and unify with subtle accent halo */
.hero-glow::before {
  background: radial-gradient(600px 400px at 50% -10%, rgba(6, 182, 212, 0.25), transparent) !important;
  filter: blur(120px) !important;
}

/* ROI estimator range slider colours */
#roi input[type="range"],
#roi .roi-range {
  accent-color: var(--nk-accent) !important;
}
#roi .roi-range::-webkit-slider-thumb {
  background: var(--nk-accent) !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
}

/* Ensure anchor and link colours use the accent */
a {
  color: var(--nk-accent) !important;
}
a:hover {
  color: var(--nk-accent) !important;
  text-decoration: underline;
}

/* Neutralise noisy gradients on section headings */
.section h2,
.section h3 {
  background: none !important;
  -webkit-background-clip: initial !important;
  color: var(--nk-accent) !important;
}

/* Pricing: highlight the recommended plan subtly */
.package-card.recommended,
.plan-card.recommended {
  border: 2px solid var(--nk-accent) !important;
  box-shadow: 0 0 0 1px var(--nk-accent) !important;
}

/* FAQ accordion chevrons coloured with accent */
.faq-section .item .icon,
.faq-section summary { color: var(--nk-accent) !important; }

/*
 * Text legibility improvements
 *
 * On dark navy surfaces some of the smaller copy and list items were still
 * using very dark colours inherited from legacy CSS (e.g. #0b141d, #081226).
 * This rule set globally elevates the brightness of paragraphs, list items,
 * and helper text to our off‑white palette. By using var(--nk-text) for
 * primary body copy and var(--nk-muted) for secondary copy we maintain
 * hierarchy while ensuring the text doesn’t disappear on dark backgrounds.
 */

/* Primary copy in paragraphs, list items, spans and small tags */
p,
li,
small,
label {
  color: var(--nk-text) !important;
}

/* Secondary/Muted text classes still remain legible */
.text-muted,
.muted,
.text-soft,
.nk-muted,
.text-white\/70,
.text-white\/75,
.text-white\/60,
.text-white\/50 {
  color: var(--nk-muted) !important;
}

/* Placeholder text inside form controls should contrast on dark surfaces */
input::placeholder,
textarea::placeholder {
  /* Use the same off‑white as body copy for higher contrast on dark surfaces */
  color: var(--nk-text) !important;
}

/* Lists inside pricing and package cards inherit the primary text colour */
.pricing-tier li,
.package-card li,
.price-card li,
.card li {
  color: var(--nk-text) !important;
}