/* ==========================================================================
   Site design system
   Glassmorphism panels, ambient animations, and light/dark theme overrides
   for parts of the design Tailwind's dark: variant can't reach cleanly.
   Dark mode is the default look; these rules only kick in under html:not(.dark).
   ========================================================================== */

/* ---- Glass panels ---- */
.dark .glass-panel {
  background: linear-gradient(135deg, rgba(20, 27, 45, 0.75) 0%, rgba(13, 18, 30, 0.85) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

html:not(.dark) .glass-panel {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.85);
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05), 0 4px 10px -2px rgba(15, 23, 42, 0.03);
}

.dark .glass-panel-hover:hover {
  border-color: rgba(99, 102, 241, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.5), 0 0 20px -3px rgba(99, 102, 241, 0.2);
}

html:not(.dark) .glass-panel-hover:hover {
  border-color: rgba(99, 102, 241, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -8px rgba(99, 102, 241, 0.12), 0 4px 12px rgba(0, 0, 0, 0.05);
}

.dark .hero-glow-radial {
  background: radial-gradient(circle at 50% 20%, rgba(99, 102, 241, 0.15) 0%, rgba(6, 182, 212, 0.06) 45%, transparent 70%);
}

html:not(.dark) .hero-glow-radial {
  background: radial-gradient(circle at 50% 20%, rgba(99, 102, 241, 0.12) 0%, rgba(6, 182, 212, 0.05) 50%, transparent 70%);
}

/* Live Mockup specific glass tokens */
.mockup-kpi-card {
  transition: all 0.25s ease;
}

.dark .mockup-kpi-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

html:not(.dark) .mockup-kpi-card {
  background: #ffffff;
  border: 1px solid #eef2f6;
  box-shadow: 0 4px 14px -2px rgba(51, 65, 85, 0.05);
}

.dark .mockup-sub-card {
  background: rgba(11, 16, 30, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

html:not(.dark) .mockup-sub-card {
  background: #f8fafc;
  border: 1px solid #edf2f7;
}

/* Blazor's <FocusOnNavigate Selector="h1"> (App.razor) focuses the page's
   h1 on every navigation for screen readers; suppress the resulting visual
   focus ring since h1 isn't an interactive element. */
h1:focus {
  outline: none;
}

/* ---- Ambient animations ---- */
@keyframes pulseSoft {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}

.animate-pulse-subtle {
  animation: pulseSoft 4s infinite ease-in-out;
}

/* ---- Light theme overrides ----
   Tailwind's dark: variant only adds styles for dark mode; these components
   were designed dark-first, so the light-mode look is expressed explicitly
   here instead, scoped by the section/element classes used across the page. */
html:not(.dark) body {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
}

html:not(.dark) #site-header {
  background-color: rgba(255, 255, 255, 0.88) !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .site-logo-text {
  color: #0f172a !important;
}

html:not(.dark) .nav-links a {
  color: #475569 !important;
}

html:not(.dark) .nav-links a:hover {
  color: #0f172a !important;
}

html:not(.dark) #theme-toggle-btn {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

html:not(.dark) .hero-heading {
  color: #0f172a !important;
}

html:not(.dark) .hero-desc {
  color: #475569 !important;
}

html:not(.dark) .hero-badge {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #4338ca !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

html:not(.dark) .hero-trial-btn {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html:not(.dark) .mockup-outer-shell {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.8) 100%) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 25px 50px -12px rgba(100, 116, 139, 0.18) !important;
}

html:not(.dark) .mockup-inner-container {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .mockup-top-bar {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .mockup-url-text {
  color: #64748b !important;
}

html:not(.dark) .mockup-policy-tag {
  color: #64748b !important;
}

html:not(.dark) .mockup-canvas-body {
  background: #f1f5f9 !important;
}

html:not(.dark) #trust-strip {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .esp-list {
  color: #334155 !important;
}

html:not(.dark) .trust-metrics-row {
  border-color: #e2e8f0 !important;
}

html:not(.dark) .metric-title {
  color: #0f172a !important;
}

html:not(.dark) .feature-heading, html:not(.dark) .card-header-text {
  color: #0f172a !important;
}

html:not(.dark) .feature-subtext, html:not(.dark) .comp-desc, html:not(.dark) .sec-desc {
  color: #475569 !important;
}

html:not(.dark) #telemetry {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .telemetry-title, html:not(.dark) .radar-title, html:not(.dark) .pipeline-title {
  color: #0f172a !important;
}

html:not(.dark) .threat-box {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .step-title, html:not(.dark) .stream-title, html:not(.dark) .stream-name {
  color: #0f172a !important;
}

html:not(.dark) .stream-row {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .stream-item {
  background-color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

html:not(.dark) .diag-box {
  background-color: #fff1f2 !important;
  border-color: #fecdd3 !important;
}

html:not(.dark) .total-vol {
  color: #0f172a !important;
}

html:not(.dark) .comp-heading {
  color: #0f172a !important;
}

html:not(.dark) .checklist {
  color: #334155 !important;
}

html:not(.dark) #architecture {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .sec-heading, html:not(.dark) .feat-title, html:not(.dark) .admin-title {
  color: #0f172a !important;
}

html:not(.dark) .admin-badge-card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.08) !important;
}

html:not(.dark) .admin-details {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .scope-val {
  color: #0f172a !important;
}

html:not(.dark) .cta-heading {
  color: #0f172a !important;
}

html:not(.dark) .cta-desc {
  color: #475569 !important;
}

html:not(.dark) .cta-demo-btn {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html:not(.dark) #site-footer {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html:not(.dark) .footer-logo-text, html:not(.dark) .footer-col-title {
  color: #0f172a !important;
}

html:not(.dark) #mobile-nav-popup {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark) #mobile-popup-theme-btn {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}

html:not(.dark) #mobile-menu-toggle-btn {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

html:not(.dark) #mobile-menu-toggle-btn svg {
  color: #1e293b !important;
}