@import "tailwindcss";

@layer base {
  :root {
    --color-brand-dark: #ffffff;
    --color-brand-card: #f8fafc;
    --color-brand-card-hover: #f1f5f9;
    --color-ice-blue: #0284c7;
    --color-ice-blue-hover: #0369a1;
    --color-ice-blue-dim: rgba(2, 132, 199, 0.05);
    --color-border-hairline: #e2e8f0;
    --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: 'Space Grotesk', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  }
}

html {
  font-family: var(--font-sans);
  scroll-behavior: smooth;
  background-color: var(--color-brand-dark);
  color: #1e293b;
  -webkit-font-smoothing: antialiased;
}

/* Headings use Space Grotesk; body copy uses Manrope */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

/* Custom styled scrollbars */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: rgba(2, 132, 199, 0.2);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(2, 132, 199, 0.4);
}

/* Image degradation fallbacks with dark overlay gradients for readability */
.img-fallback-eye {
  background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.35) 100%),
    url('../images/hero-eye.jpg'),
    radial-gradient(circle at center, rgba(125, 211, 252, 0.1) 0%, rgba(0, 0, 0, 0.8) 100%);
  background-size: cover;
  background-position: center;
}

.img-fallback-install {
  background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%),
    url('../images/engineer-install.jpg');
  background-size: cover;
  background-position: center;
}

.img-fallback-control {
  background-image: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%),
    url('../images/asm-control-room.jpg');
  background-size: cover;
  background-position: center;
}

/* Accordion transition utility */
details summary::-webkit-details-marker {
  display: none;
}
details[open] summary svg {
  transform: rotate(180deg);
}

/* Animation utilities */
.animate-fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================
   PREMIUM COHESIVE LIGHT THEME SYSTEM MAPPINGS
   (Supports complete multipage white background conversion)
   ========================================== */

/* Overall Body Background and Text */
body {
  background-color: #ffffff !important;
  color: #1e293b !important;
}

/* Background Utility Color Mapping Override */
.bg-\[\#040813\] {
  background-color: #ffffff !important;
}

.bg-\[\#090f23\] {
  background-color: #f8fafc !important;
}

.bg-\[\#050b1d\]\/50,
.bg-\[\#050b1d\]\/40,
.bg-\[\#050b1d\]\/30 {
  background-color: #f8fafc !important;
}

.bg-\[\#090f23\]\/40 {
  background-color: #f1f5f9 !important;
}

/* Border Utility Mappings */
.border-\[rgba\(125\,211\,252\,0\.12\)\] {
  border-color: #e2e8f0 !important;
}

.border-\[rgba\(125\,211\,252\,0\.06\)\] {
  border-color: #e2e8f0 !important;
}

/* Text Colors */
.text-slate-100 {
  color: #1e293b !important;
}

.text-slate-200 {
  color: #334155 !important;
}

.text-slate-300 {
  color: #475569 !important;
}

.text-slate-400 {
  color: #64748b !important;
}

.text-slate-500 {
  color: #64748b !important;
}

.text-white {
  color: #0f172a !important;
}

.text-sky-300,
.text-sky-400 {
  color: #0284c7 !important;
}

/* Sticky Headers (Subpages) */
header.sticky {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-bottom-color: #e2e8f0 !important;
}

header.sticky .text-white {
  color: #0f172a !important;
}

header.sticky .text-slate-300 {
  color: #475569 !important;
}

header.sticky .text-sky-300 {
  color: #0284c7 !important;
}

header.sticky .text-sky-400 {
  color: #0284c7 !important;
}

header.sticky #header-cta-btn {
  background-color: #0284c7 !important;
  color: #ffffff !important;
}

header.sticky #header-cta-btn:hover {
  background-color: #0369a1 !important;
}

header.sticky nav a {
  color: #475569 !important;
}

header.sticky nav a:hover {
  color: #0284c7 !important;
}

/* Active links in subpage headers */
header.sticky nav a.text-sky-300 {
  color: #0284c7 !important;
  font-weight: 600 !important;
}

/* Standard Highlight Buttons */
.bg-sky-300 {
  background-color: #0284c7 !important;
  color: #ffffff !important;
}

.bg-sky-300:hover {
  background-color: #0369a1 !important;
}

.hover\:text-white:hover {
  color: #0284c7 !important;
}

.hover\:border-sky-300:hover {
  border-color: #0284c7 !important;
}

.hover\:text-sky-300:hover {
  color: #0284c7 !important;
}

/* Footers on Subpages */
footer {
  background-color: #f8fafc !important;
  border-top-color: #e2e8f0 !important;
}

footer .text-white {
  color: #0f172a !important;
}

footer .text-slate-400 {
  color: #475569 !important;
}

footer .text-sky-300 {
  color: #0284c7 !important;
}

footer .text-sky-400 {
  color: #0284c7 !important;
}

footer .border-t {
  border-top-color: #e2e8f0 !important;
}

/* ==========================================
   PRESERVING HERO DESIGN SPECIFICS
   ========================================== */

/* Centered minimalist dark eye hero elements on index.html */
#hero-section,
#hero-section h1,
#hero-section span,
#hero-section p {
  color: #ffffff !important;
}

#hero-section .text-sky-400 {
  color: #38bdf8 !important;
}

#hero-section .absolute {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Overlay Header Style for Homepage (Transparent Over Dark Hero) */
header.absolute {
  background-color: transparent !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

header.absolute .text-white {
  color: #ffffff !important;
}

header.absolute .text-slate-200 {
  color: #cbd5e1 !important;
}

header.absolute .text-slate-300 {
  color: #94a3b8 !important;
}

header.absolute .text-sky-300,
header.absolute .text-sky-400 {
  color: #38bdf8 !important;
}

header.absolute #header-cta-btn {
  background-color: #38bdf8 !important;
  color: #040813 !important;
}

header.absolute #header-cta-btn:hover {
  background-color: #7dd3fc !important;
}

/* Keep text readable on dark visual panels with image background fallbacks */
[class*="img-fallback-"] .text-white,
[class*="img-fallback-"] h1,
[class*="img-fallback-"] h2,
[class*="img-fallback-"] h3,
[class*="img-fallback-"] p,
[class*="img-fallback-"] span {
  color: #ffffff !important;
}

[class*="img-fallback-"] .text-sky-300 {
  color: #7dd3fc !important;
}

[class*="img-fallback-"] .text-sky-400 {
  color: #38bdf8 !important;
}

/* invented sizes used in markup */
.text-2xs { font-size: 0.65rem; line-height: 1rem; }
.text-3xs { font-size: 0.6rem; line-height: 0.9rem; }
.text-md { font-size: 1rem; line-height: 1.5rem; }