/* ========================================
   PANELPULSE VISUAL REBRAND
   Navy Blue Monochrome — Professional B2B SaaS
   Light backgrounds, navy brand color
   ======================================== */

:root {
  /* Navy Blue Brand — Single Color Family */
  --navy:        #1e3a5f;
  --navy-dark:   #142847;
  --navy-light:  #2d5282;
  --navy-muted:  #4a7bb5;
  --navy-pale:   #eef2f7;
  --navy-faint:  rgba(30, 58, 95, 0.06);

  /* Backward-compatible aliases — HTML files use these */
  --cyan:          #1e3a5f;   /* was #00d4ff */
  --cyan-muted:    #2d5282;   /* was #00b8d4 */
  --teal:          #2d5282;   /* was #00c9b7 */
  --purple-accent: #1e3a5f;   /* was #9d4edd */
  --purple-light:  #4a7bb5;   /* was #c77dff */

  /* Page Backgrounds — Light & Airy */
  --bg-dark:      #f0f2f5;   /* was #000000 — now page background */
  --bg-secondary: #f8f9fa;   /* was #0a0a14 */
  --bg-tertiary:  #ffffff;   /* was #13131d */
  --bg-nav:       #1e3a5f;   /* dark navy for nav/topbar */

  /* Grays & Neutrals */
  --silver:      #d1d5db;
  --silver-dim:  #9ca3af;
  --gray-dark:   #6b7280;
  --gray-darker: #4b5563;

  /* Status Colors */
  --success: #10b981;
  --warning: #f59e0b;
  --danger:  #ef4444;

  /* Text Colors — Dark for light backgrounds */
  --text-primary:   #111827;
  --text-secondary: #374151;
  --text-tertiary:  #6b7280;
  --text-inverse:   #ffffff;

  /* Gradients — Navy family */
  --gradient-pulse:         linear-gradient(90deg,  var(--navy) 0%, var(--navy-muted) 100%);
  --gradient-pulse-reverse: linear-gradient(270deg, var(--navy) 0%, var(--navy-muted) 100%);
}

/* ========================================
   NAV / TOPBAR — Dark Navy Override
   All nav/topbar elements get white text
   on dark navy background
   ======================================== */

nav,
.topbar {
  background: var(--bg-nav) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

nav a:not(.btn-primary):not(.logo),
.topbar a:not(.btn-primary):not(.logo) {
  color: rgba(255, 255, 255, 0.8) !important;
}

nav a:not(.btn-primary):not(.logo):hover,
.topbar a:not(.btn-primary):not(.logo):hover {
  color: #ffffff !important;
}

/* Logo stays navy gradient on dark bg — use white text fallback */
nav .logo,
.topbar .logo {
  background: linear-gradient(90deg, #7eb8f7 0%, #a8d4ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Logo icon — EKG waveform SVG */
.logo-icon {
  stroke: #1e3a5f;
  fill: none;
  flex-shrink: 0;
}

nav .logo-icon,
.topbar .logo-icon {
  stroke: #7eb8f7 !important;
}

/* Remove underline hover effect from logo */
a.logo::after { display: none !important; }

/* Logo wordmark weight split — higher specificity to override .logo { font-weight: 700 } */
.logo .logo-panel { font-weight: 400 !important; }
.logo .logo-pulse  { font-weight: 700 !important; }

/* Ghost button in topbar */
nav .btn-ghost,
.topbar .btn-ghost {
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

nav .btn-ghost:hover,
.topbar .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Live indicator in topbar */
.topbar .live-indicator { color: #7eb8f7 !important; }
.topbar .live-dot { background: #7eb8f7 !important; }

/* ========================================
   BODY & PAGE LAYOUT
   ======================================== */

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

/* ========================================
   PARTICLE ANIMATION SYSTEM
   ======================================== */

@keyframes particle-float {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(0) scale(1);
  }
  20% { opacity: 0.6; }
  80% { opacity: 0.4; }
  100% {
    opacity: 0;
    transform: translateX(var(--tx, 30px)) translateY(var(--ty, -30px)) scale(0);
  }
}

@keyframes particle-drift-left {
  0%   { opacity: 0; transform: translateX(0) translateY(0); }
  15%  { opacity: 0.5; }
  85%  { opacity: 0.3; }
  100% { opacity: 0; transform: translateX(-60px) translateY(-40px); }
}

@keyframes particle-drift-right {
  0%   { opacity: 0; transform: translateX(0) translateY(0); }
  15%  { opacity: 0.5; }
  85%  { opacity: 0.3; }
  100% { opacity: 0; transform: translateX(60px) translateY(-40px); }
}

/* Particle elements — subtle navy dots */
.particle {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--navy-muted), var(--navy));
  box-shadow: 0 0 6px rgba(30, 58, 95, 0.35), 0 0 12px rgba(74, 123, 181, 0.2);
  filter: blur(0.5px);
}

.particle.size-sm { width: 3px;  height: 3px; }
.particle.size-md {
  width: 5px; height: 5px;
  box-shadow: 0 0 8px rgba(30, 58, 95, 0.4), 0 0 16px rgba(74, 123, 181, 0.2);
}
.particle.size-lg {
  width: 7px; height: 7px;
  box-shadow: 0 0 10px rgba(30, 58, 95, 0.4), 0 0 20px rgba(74, 123, 181, 0.2);
}

.particle.animate-drift-left  { animation: particle-drift-left  3s ease-out forwards; }
.particle.animate-drift-right { animation: particle-drift-right 3s ease-out forwards; }
.particle.animate-float        { animation: particle-float        2.5s ease-out forwards; }

/* ========================================
   PULSE / HEARTBEAT ANIMATION
   ======================================== */

@keyframes pulse-line-draw {
  0%   { opacity: 0; stroke-dashoffset: 200; }
  20%  { opacity: 1; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}

@keyframes pulse-beat {
  0%, 100% { opacity: 0.25; transform: scaleY(1); }
  25%       { opacity: 0.7;  transform: scaleY(1.4); }
  50%       { opacity: 0.4;  transform: scaleY(1); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(30, 58, 95, 0.3); }
  50%       { box-shadow: 0 0 24px rgba(30, 58, 95, 0.5), 0 0 40px rgba(74, 123, 181, 0.2); }
}

/* Pulse line container */
.pulse-line {
  position: relative;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--navy-light) 20%,
    var(--navy-muted) 50%,
    var(--navy-light) 80%,
    transparent 100%);
  border-radius: 2px;
  overflow: hidden;
  animation: glow-pulse 3s ease-in-out infinite;
}

.pulse-line::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--gradient-pulse);
  animation: pulse-beat 2s ease-in-out infinite;
  transform-origin: center;
}

/* ========================================
   HERO PARTICLE CONTAINER
   ======================================== */

.particle-container {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* ========================================
   CARD SYSTEM — Light with navy accents
   ======================================== */

.glass-card {
  background: #ffffff;
  border: 1px solid rgba(30, 58, 95, 0.1);
  border-radius: 16px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 0 1px 4px rgba(30, 58, 95, 0.06);
}

.glass-card:hover {
  background: #ffffff;
  border-color: rgba(30, 58, 95, 0.25);
  box-shadow: 0 8px 24px rgba(30, 58, 95, 0.1);
  transform: translateY(-2px);
}

/* ========================================
   BORDER GRADIENTS
   ======================================== */

.gradient-border {
  position: relative;
  background: #ffffff padding-box,
              var(--gradient-pulse) border-box;
  border: 1px solid transparent;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: var(--gradient-pulse);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}

.gradient-border:hover::before { opacity: 0.12; }

/* ========================================
   BUTTON OVERRIDES
   ======================================== */

.btn-primary {
  background: var(--navy) !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 600;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.btn-primary:hover {
  background: var(--navy-light) !important;
  box-shadow: 0 4px 16px rgba(30, 58, 95, 0.35) !important;
  transform: translateY(-2px) !important;
}

.btn-primary:active { transform: translateY(0) !important; }

.btn-accent {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-accent:hover {
  background: rgba(30, 58, 95, 0.07);
  box-shadow: 0 2px 12px rgba(30, 58, 95, 0.15);
}

/* ========================================
   LINK STYLES
   ======================================== */

a {
  color: var(--navy);
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
}

a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--gradient-pulse);
  transition: width 0.3s ease;
}

a:hover::after { width: 100%; }

/* ========================================
   INPUT FOCUS STATES
   ======================================== */

.fi:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--navy) !important;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12) !important;
  background: #ffffff !important;
}

/* ========================================
   ACCENT TEXT
   ======================================== */

.text-cyan    { color: var(--navy); }
.text-purple  { color: var(--navy-light); }

.text-gradient {
  background: var(--gradient-pulse);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.glow-cyan   { box-shadow: 0 0 16px rgba(30, 58, 95, 0.25); }
.glow-purple { box-shadow: 0 0 16px rgba(74, 123, 181, 0.25); }

.border-cyan   { border-color: var(--navy) !important; }
.border-purple { border-color: var(--navy-light) !important; }