@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;700&family=JetBrains+Mono:wght@400;500;700&family=Montserrat:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  --primary: #00B2FB;
  --primary-hover: #0096D6;
  --primary-glow: rgba(0, 178, 251, 0.35);
  --primary-dark: #006899;
  --bg-dark: #070B14;
  --bg-dark-card: #0D1424;
  --bg-dark-surface: #121B30;
  --border-dark: rgba(0, 178, 251, 0.15);
  --border-dark-hover: rgba(0, 178, 251, 0.4);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Headings font */
h1, h2, h3, .font-heading {
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
}

.font-mono-code {
  font-family: 'JetBrains Mono', monospace;
}

.font-led {
  font-family: 'Chakra Petch', 'JetBrains Mono', monospace;
}

/* Background Gradients & Glows */
.bg-mesh-dark {
  background-color: var(--bg-dark);
  background-image: 
    radial-gradient(at 15% 15%, rgba(0, 178, 251, 0.12) 0px, transparent 50%),
    radial-gradient(at 85% 25%, rgba(30, 64, 175, 0.15) 0px, transparent 50%),
    radial-gradient(at 50% 80%, rgba(6, 182, 212, 0.08) 0px, transparent 60%);
}

.bg-mesh-light {
  background-color: #F8FAFC;
  background-image: 
    radial-gradient(at 15% 15%, rgba(0, 178, 251, 0.08) 0px, transparent 50%),
    radial-gradient(at 85% 25%, rgba(59, 130, 246, 0.06) 0px, transparent 50%),
    radial-gradient(at 50% 80%, rgba(6, 182, 212, 0.05) 0px, transparent 60%);
}

/* Glassmorphism Cards */
.glass-card-dark {
  background: rgba(13, 20, 36, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-dark);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.glass-card-dark:hover {
  border-color: var(--border-dark-hover);
  box-shadow: 0 12px 40px 0 rgba(0, 178, 251, 0.15);
}

.glass-card-light {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
}

.glass-card-light:hover {
  border-color: rgba(0, 178, 251, 0.4);
  box-shadow: 0 14px 35px -5px rgba(0, 178, 251, 0.12);
}

/* Glowing Elements */
.glow-primary {
  box-shadow: 0 0 25px var(--primary-glow);
}

.glow-text-cyan {
  text-shadow: 0 0 20px rgba(0, 178, 251, 0.6);
}

/* LED Digital Scale Display */
.scale-display {
  background: #02070D;
  border: 3px solid #1E293B;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9), 0 0 15px rgba(0, 178, 251, 0.15);
  position: relative;
  overflow: hidden;
}

.scale-display::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  z-index: 2;
  background-size: 100% 4px, 6px 100%;
  pointer-events: none;
}

.led-digits {
  color: #00FF88;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.7), 0 0 20px rgba(0, 255, 136, 0.4);
}

.led-digits.unstable {
  color: #FFAA00;
  text-shadow: 0 0 10px rgba(255, 170, 0, 0.7), 0 0 20px rgba(255, 170, 0, 0.4);
}

/* Thermal Ticket Style */
.thermal-receipt {
  background: #FFFFF8;
  color: #1A1A1A;
  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
  position: relative;
  font-family: 'JetBrains Mono', monospace;
}

.thermal-receipt::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 8px;
  background: radial-gradient(circle, transparent, transparent 50%, #FFFFF8 50%, #FFFFF8 100%);
  background-size: 16px 16px;
}

/* Interactive Canvas Layer */
#network-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #070B14;
}
::-webkit-scrollbar-thumb {
  background: #1E293B;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #00B2FB;
}

/* Floating animation */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

@keyframes pulse-subtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}

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

/* Print specific for scale tickets */
@media print {
  body * {
    visibility: hidden;
  }
  #printable-ticket, #printable-ticket * {
    visibility: visible;
  }
  #printable-ticket {
    position: absolute;
    left: 0;
    top: 0;
    width: 80mm;
    margin: 0;
    padding: 10px;
    box-shadow: none;
    border: none;
  }
}

/* Enterprise Modern UI Elements */
.sankhya-nav-pill {
  background: rgba(13, 20, 36, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.sankhya-btn-green {
  background-color: #22C55E;
  color: #052E16;
  font-weight: 800;
  transition: all 0.2s ease;
}

.sankhya-btn-green:hover {
  background-color: #16A34A;
  color: #FFFFFF;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
}

.sankhya-chat-card {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.font-sankhya {
  font-family: 'Montserrat', 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}

/* Áurea Virtual Assistant Styles */
@keyframes aureaGlowPulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.4), 0 0 30px rgba(0, 178, 251, 0.2);
  }
  50% {
    box-shadow: 0 0 25px rgba(34, 197, 94, 0.7), 0 0 45px rgba(0, 178, 251, 0.4);
  }
}

#aurea-launcher-btn {
  animation: aureaGlowPulse 4s infinite ease-in-out;
}

.aurea-formatted-text strong {
  color: #34D399;
}

.aurea-formatted-text a {
  color: #38BDF8;
  text-decoration: underline;
}

#aurea-messages-container::-webkit-scrollbar,
#aurea-keys-inputs::-webkit-scrollbar {
  width: 5px;
}

#aurea-messages-container::-webkit-scrollbar-track,
#aurea-keys-inputs::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
}

#aurea-messages-container::-webkit-scrollbar-thumb,
#aurea-keys-inputs::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}

#aurea-messages-container::-webkit-scrollbar-thumb:hover,
#aurea-keys-inputs::-webkit-scrollbar-thumb:hover {
  background: #10B981;
}

/* ==========================================================================
   Smooth Transitions for Theme Switching
   ========================================================================== */
body,
.sankhya-nav-pill,
header,
.glass-card-dark,
.glass-card-light {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* ==========================================================================
   LIGHT MODE OVERRIDES (html:not(.dark))
   Executive, modern and high-contrast aesthetic
   ========================================================================== */

html:not(.dark) {
  color-scheme: light;
}

/* Base Body and Main Backgrounds */
html:not(.dark) body,
html:not(.dark) .bg-\[\#070B14\],
html:not(.dark) .bg-mesh-dark {
  background-color: #F8FAFC !important;
  color: #1E293B !important;
  background-image: 
    radial-gradient(at 15% 15%, rgba(0, 178, 251, 0.07) 0px, transparent 50%),
    radial-gradient(at 85% 25%, rgba(59, 130, 246, 0.05) 0px, transparent 50%),
    radial-gradient(at 50% 80%, rgba(16, 185, 129, 0.04) 0px, transparent 60%) !important;
}

/* Executive Navbar Pill in Light Mode */
html:not(.dark) .sankhya-nav-pill {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(203, 213, 225, 0.9) !important;
  box-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04) !important;
}

html:not(.dark) .sankhya-nav-pill nav a,
html:not(.dark) .sankhya-nav-pill nav span {
  color: #334155 !important;
}

html:not(.dark) .sankhya-nav-pill nav a:hover,
html:not(.dark) .sankhya-nav-pill nav span:hover {
  color: #0F172A !important;
}

/* Minimalist Model Header (index.html) */
html:not(.dark) header.sticky {
  background-color: rgba(255, 255, 255, 0.92) !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
}

html:not(.dark) header.sticky nav a {
  color: #334155 !important;
}

html:not(.dark) header.sticky nav a:hover {
  color: #0F172A !important;
}

/* Top Utility Bar */
html:not(.dark) .bg-slate-950\/80 {
  background-color: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
  color: #64748B !important;
}

/* Dropdown Menus in Navigation */
html:not(.dark) nav .absolute,
html:not(.dark) .group:hover .absolute {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.12) !important;
}

html:not(.dark) nav .absolute a {
  color: #334155 !important;
}

html:not(.dark) nav .absolute a:hover {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

/* Typography Overrides */
html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) h4,
html:not(.dark) h5,
html:not(.dark) h6,
html:not(.dark) .text-white {
  color: #0F172A !important;
}

html:not(.dark) .text-slate-100,
html:not(.dark) .text-slate-200 {
  color: #1E293B !important;
}

html:not(.dark) .text-slate-300 {
  color: #334155 !important;
}

html:not(.dark) .text-slate-400 {
  color: #64748B !important;
}

html:not(.dark) .text-slate-500 {
  color: #94A3B8 !important;
}

/* Cards & Surface Containers */
html:not(.dark) .bg-slate-900,
html:not(.dark) .bg-slate-900\/90,
html:not(.dark) .bg-slate-900\/80,
html:not(.dark) .bg-slate-900\/70,
html:not(.dark) .bg-slate-900\/60,
html:not(.dark) .bg-slate-900\/50,
html:not(.dark) .bg-slate-900\/40,
html:not(.dark) .bg-slate-950,
html:not(.dark) .bg-slate-950\/90,
html:not(.dark) .bg-slate-950\/80,
html:not(.dark) .bg-slate-950\/70,
html:not(.dark) .bg-slate-950\/50,
html:not(.dark) .bg-darkbg-card,
html:not(.dark) .bg-darkbg-surface,
html:not(.dark) .bg-\[\#0B101D\],
html:not(.dark) .bg-\[\#0D1424\],
html:not(.dark) .glass-card-dark {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
}

html:not(.dark) .glass-card-dark:hover {
  border-color: rgba(0, 178, 251, 0.4) !important;
  box-shadow: 0 12px 30px -5px rgba(0, 178, 251, 0.1) !important;
}

/* Spotlight Gradient Cards in Hero */
html:not(.dark) .from-emerald-950\/60 {
  background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 100%) !important;
  border-color: #BBF7D0 !important;
}

html:not(.dark) .from-cyan-950\/60 {
  background: linear-gradient(135deg, #F0F9FF 0%, #FFFFFF 100%) !important;
  border-color: #BAE6FD !important;
}

/* Borders */
html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-800\/80,
html:not(.dark) .border-slate-800\/60,
html:not(.dark) .border-slate-800\/50,
html:not(.dark) .border-slate-700,
html:not(.dark) .border-slate-700\/80,
html:not(.dark) .border-slate-700\/50 {
  border-color: #E2E8F0 !important;
}

/* Theme Toggle Button */
html:not(.dark) #theme-toggle,
html:not(.dark) #theme-toggle-mobile {
  background-color: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  color: #1E293B !important;
}

html:not(.dark) #theme-toggle:hover,
html:not(.dark) #theme-toggle-mobile:hover {
  background-color: #E2E8F0 !important;
  color: #0F172A !important;
}

/* Form Controls & Inputs */
html:not(.dark) input:not([type="checkbox"]):not([type="radio"]),
html:not(.dark) select,
html:not(.dark) textarea {
  background-color: #FFFFFF !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
  border-color: #00B2FB !important;
  box-shadow: 0 0 0 3px rgba(0, 178, 251, 0.15) !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: #94A3B8 !important;
}

/* Badges & Chips */
html:not(.dark) .bg-slate-800,
html:not(.dark) .bg-slate-800\/80,
html:not(.dark) .bg-slate-800\/60 {
  background-color: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
  color: #334155 !important;
}

html:not(.dark) .hover\:bg-slate-800:hover,
html:not(.dark) .hover\:bg-slate-700:hover {
  background-color: #F1F5F9 !important;
}

/* Simulator Tablist */
html:not(.dark) [role="tablist"] {
  background-color: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
}

html:not(.dark) [role="tablist"] button.text-slate-400 {
  color: #64748B !important;
}

html:not(.dark) [role="tablist"] button.text-slate-400:hover {
  color: #0F172A !important;
}

/* Footer in Light Mode */
html:not(.dark) footer,
html:not(.dark) .bg-\[\#04070D\] {
  background-color: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
  color: #334155 !important;
}

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

html:not(.dark) footer a:hover {
  color: #0F172A !important;
}

/* Áurea Launcher & Bubble in Light Mode */
html:not(.dark) #aurea-launcher-btn {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: #10B981 !important;
  color: #0F172A !important;
  box-shadow: 0 10px 30px -5px rgba(16, 185, 129, 0.3) !important;
}

html:not(.dark) #aurea-launcher-btn div.text-white {
  color: #0F172A !important;
}

html:not(.dark) #aurea-welcome-bubble {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #1E293B !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1) !important;
}

html:not(.dark) #aurea-welcome-bubble p {
  color: #334155 !important;
}

/* Hardware & Developer Console Exemptions (Always Authentic Dark) */
html:not(.dark) .scale-display,
html:not(.dark) #split-log-container,
html:not(.dark) #nfse-log-window,
html:not(.dark) .terminal-window,
html:not(.dark) pre,
html:not(.dark) code.block {
  background-color: #02070D !important;
  border-color: #1E293B !important;
  color: #E2E8F0 !important;
}

html:not(.dark) #split-log-container *,
html:not(.dark) #nfse-log-window * {
  color: inherit;
}

/* Scrollbars in Light Mode */
html:not(.dark)::-webkit-scrollbar-track {
  background: #F1F5F9;
}

html:not(.dark)::-webkit-scrollbar-thumb {
  background: #CBD5E1;
}

html:not(.dark)::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}