/* assets/css/variables.css */
:root {
  /* Brand Colors - Corporate Signage Theme */
  --bg-primary: #121212; /* Dark Charcoal */
  --bg-secondary: #1a1a1a; /* Slightly lighter Charcoal */
  --bg-glass: rgba(255, 255, 255, 0.03);
  --bg-glass-border: rgba(255, 255, 255, 0.08);
  
  --text-primary: #f8f9fa; /* Crisp White */
  --text-secondary: #e0e0e0; /* Light Gray */
  --text-muted: #9e9e9e; /* Medium Gray */
  
  --accent-primary: #D32F2F; /* Darker, less bright red */ /* BoardWale Red */
  --accent-secondary: #03A9F4; /* Electric Blue */
  --accent-tertiary: #B71C1C; /* Dark Red */
  
  /* Typography */
  --font-primary: 'Inter', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  
  /* Layout */
  --max-width: 1440px;
  --container-padding: 2rem;
  --header-height: 60px;
  
  /* Radii */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-normal: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* Z-Index */
  --z-negative: -1;
  --z-normal: 1;
  --z-header: 100;
  --z-modal: 1000;
  --z-cursor: 9999;
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
  --bg-primary: #f4f6f8;
  --bg-secondary: #e8ecf0;
  --bg-glass: rgba(0, 0, 0, 0.04);
  --bg-glass-border: rgba(0, 0, 0, 0.1);
  --text-primary: #111111;
  --text-secondary: #333333;
  --text-muted: #555555;
  --accent-primary: #D32F2F;
  --accent-secondary: #0277BD;
}

/* Body & background */
[data-theme="light"] body {
  background-color: var(--bg-primary) !important;
  background-image: none !important;
  color: #111 !important;
}

/* Hide only the ambient glow orbs in light mode — keep 3D cubes visible */
[data-theme="light"] .ambient-bg {
  display: none !important;
}

/* Reduce 3D cube opacity slightly so they look natural on light background */
[data-theme="light"] #webgl-hero-container {
  opacity: 0.55;
}

/* Header */
[data-theme="light"] .site-header {
  background: rgba(244, 246, 248, 0.97) !important;
  border-bottom: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08) !important;
}
[data-theme="light"] .nav-link { color: #222 !important; }
[data-theme="light"] .nav-link.active { color: #000 !important; }
[data-theme="light"] .menu-toggle span { background: #222 !important; }

/* Override ALL hardcoded white text */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 { color: #111 !important; }

[data-theme="light"] p,
[data-theme="light"] li,
[data-theme="light"] span:not(.stat-text):not(#theme-icon-moon):not(#theme-icon-sun) {
  color: #333 !important;
}

/* Trust badge */
[data-theme="light"] .trust-badge {
  background: rgba(0,0,0,0.06) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: #333 !important;
}

/* Signage labels */
[data-theme="light"] .signage-label { color: #444 !important; }

/* Hero buttons */
[data-theme="light"] .btn-primary {
  background: #111 !important;
  color: #fff !important;
}
[data-theme="light"] .btn-outline {
  color: #111 !important;
  border-color: rgba(0,0,0,0.3) !important;
}
[data-theme="light"] .btn-outline:hover {
  background: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .btn-text { color: #444 !important; }
[data-theme="light"] .btn-text:hover { color: #111 !important; }

/* Stats */
[data-theme="light"] .stat-num { color: #111 !important; text-shadow: none !important; }
[data-theme="light"] .hero-stats { border-color: rgba(0,0,0,0.12) !important; }

/* Glass panels, cards */
[data-theme="light"] .glass-panel {
  background: rgba(255,255,255,0.85) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* Sections */
[data-theme="light"] section { background: transparent !important; }
[data-theme="light"] .stats-section,
[data-theme="light"] .dark-overlay-bg {
  background: var(--bg-secondary) !important;
  background-image: none !important;
}
[data-theme="light"] .trusted-brands {
  background: rgba(230, 234, 238, 0.9) !important;
}
[data-theme="light"] .grayscale-logo { color: rgba(0,0,0,0.4) !important; }
[data-theme="light"] .grayscale-logo:hover { color: #111 !important; }

/* Footer stays dark for contrast — must be fully solid to block 3D canvas */
[data-theme="light"] .site-footer {
  background: #1c1c1c !important;
  isolation: isolate;
  position: relative;
  z-index: 2;
}

/* Explicitly restore footer text to white/light — overrides the broad #333 rule */
[data-theme="light"] .site-footer h1,
[data-theme="light"] .site-footer h2,
[data-theme="light"] .site-footer h3,
[data-theme="light"] .site-footer h4,
[data-theme="light"] .site-footer h5,
[data-theme="light"] .site-footer h6 { color: #ffffff !important; }

[data-theme="light"] .site-footer p,
[data-theme="light"] .site-footer li { color: #aaaaaa !important; }

[data-theme="light"] .site-footer a { color: #cccccc !important; }
[data-theme="light"] .site-footer a:hover { color: var(--accent-primary) !important; }

/* Match the exact ID specificity of the global span rule to successfully override it */
[data-theme="light"] .site-footer span:not(#theme-icon-moon):not(#theme-icon-sun),
[data-theme="light"] .site-footer span { color: #aaaaaa !important; }

[data-theme="light"] .site-footer .text-muted { color: #888888 !important; }

[data-theme="light"] .footer-bottom p { color: #cccccc !important; }
[data-theme="light"] .footer-bottom span:not(#theme-icon-moon):not(#theme-icon-sun),
[data-theme="light"] .footer-bottom span { color: #cccccc !important; }

/* Keep Technobuzz Systems accent colour */
[data-theme="light"] .site-footer .footer-bottom [style*="accent-secondary"],
[data-theme="light"] .site-footer .footer-bottom span[onmouseover] { color: var(--accent-secondary) !important; }

/* Reveal text animation override */
[data-theme="light"] .reveal-text { color: #111 !important; }

/* Stat text accent stays red */
[data-theme="light"] .stat-text { color: var(--accent-primary) !important; }

/* Text gradient — switch to dark gradient */
[data-theme="light"] .text-gradient {
  background: linear-gradient(135deg, #111, var(--accent-primary)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}