@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

:root {
  /* Premium Light Mode - Mist & Sapphire */
  --background: #F8FAFC;
  --foreground: #0F172A;
  
  --card: #ffffff;
  --card-foreground: #1E293B;
  
  --primary: #2563EB; /* Royal Sapphire */
  --primary-foreground: #F8FAFC;
  
  --secondary: #6366F1; /* Indigo Mist */
  --secondary-foreground: #F8FAFC;
  
  --accent: #2085d8; /* Amber Gold */
  --accent-foreground: #0F172A;
  
  --muted: #F1F5F9;
  --muted-foreground: #64748B;
  
  --border: #E2E8F0;
  --input: #E2E8F0;
  --ring: #2563EB;
}

.dark {
  /* Restore Original Dark Mode - Deep Forest & Mint */
  --background: #091413;
  --foreground: #F9F8F6;
  
  --card: #121F1D;
  --card-foreground: #B0E4CC;
  
  --primary: #408A71;
  --primary-foreground: #091413;
  
  --secondary: #285A48;
  --secondary-foreground: #B0E4CC;
  
  --accent: #B0E4CC;
  --accent-foreground: #091413;
  
  --muted: #1A2E2A;
  --muted-foreground: #8A9A97;
  
  --border: #1A2E2A;
  --input: #1A2E2A;
  --ring: #408A71;
}

/* Premium Color Palettes */

.theme-sapphire-gold {
  --primary: #C5A059;
  --primary-foreground: #FFFFFF;
  --secondary: #1E3A8A;
  --secondary-foreground: #FFFFFF;
  --accent: #D4AF37;
  --accent-foreground: #1E3A8A;
  --ring: #C5A059;
}

.theme-emerald-night {
  --primary: #10B981;
  --primary-foreground: #064E3B;
  --secondary: #064E3B;
  --secondary-foreground: #F0FDF4;
  --accent: #34D399;
  --accent-foreground: #064E3B;
  --ring: #10B981;
}

.theme-royal-amethyst {
  --primary: #8B5CF6;
  --primary-foreground: #FFFFFF;
  --secondary: #4C1D95;
  --secondary-foreground: #F5F3FF;
  --accent: #A78BFA;
  --accent-foreground: #4C1D95;
  --ring: #8B5CF6;
}

.theme-crimson-slate {
  --primary: #EF4444;
  --primary-foreground: #FFFFFF;
  --secondary: #1F2937;
  --secondary-foreground: #F9FAFB;
  --accent: #F87171;
  --accent-foreground: #1F2937;
  --ring: #EF4444;
}

.theme-cyber-neon {
  --primary: #06B6D4;
  --primary-foreground: #083344;
  --secondary: #0F172A;
  --secondary-foreground: #ECFEFF;
  --accent: #22D3EE;
  --accent-foreground: #083344;
  --ring: #06B6D4;
}

/* Dark Mode Overrides for Themes */
.dark.theme-sapphire-gold {
  --background: #0A0F1D; /* Deep, rich navy black */
  --card: #111827;       /* Slightly lighter navy for contrast */
  --border: #1E3A8A;
  --muted: #172554;
  --muted-foreground: #93C5FD;
}

.dark.theme-emerald-night {
  --background: #05140F; /* Deep forest black */
  --card: #0A2118;       /* Slightly lighter forest green */
  --border: #064E3B;
  --muted: #022C22;
  --muted-foreground: #6EE7B7;
}

.dark.theme-royal-amethyst {
  --background: #0B0714; /* Deep violet black */
  --card: #150E24;       /* Lighter violet */
  --border: #4C1D95;
  --muted: #2E1065;
  --muted-foreground: #C4B5FD;
}

.dark.theme-crimson-slate {
  --background: #120808; /* Deep crimson black */
  --card: #1C0C0C;       /* Slightly lighter crimson */
  --border: #7F1D1D;
  --muted: #450A0A;
  --muted-foreground: #FCA5A5;
}

.dark.theme-cyber-neon {
  --background: #051016; /* Deep ocean black */
  --card: #0A1922;       /* Lighter ocean */
  --border: #082F49;
  --muted: #082F49;
  --muted-foreground: #67E8F9;
}




@theme inline {
  /* Semantic Tokens */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  /* Named Palette Tokens */
  --color-forest-dark: #091413;
  --color-forest-deep: #285A48;
  --color-forest-sage: #408A71;
  --color-forest-mint: #B0E4CC;
  --color-ivory: #F9F8F6;


  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);

  @keyframes scan {
    0% { top: 0; }
    100% { top: 100%; }
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* HUD / Tech Sidebar UI */
.banner-hud-container {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: min(6rem, 10vh) min(6rem, 7vw);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 20;
}

.hud-line {
  width: 1px;
  height: 0;
  background: linear-gradient(to bottom, transparent, var(--primary), transparent);
  position: absolute;
  left: 4rem;
  bottom: 6rem;
  animation: grow-line 1.5s forwards ease-out;
}

@keyframes grow-line {
  to { height: 300px; }
}

.hud-content {
  margin-left: 2rem;
  position: relative;
}

.hud-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  padding: 0.5rem 1.25rem;
  border-radius: 99px;
  color: var(--primary);
  font-family: var(--font-playfair), serif;
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 2rem;
  backdrop-filter: blur(10px);
  animation: fade-in-up 0.8s forwards;
}


.banner-head-hud {
  font-family: var(--font-playfair), serif;
  font-size: min(5rem, 6.5vw, 18vh);
  font-weight: 500;
  color: white;
  line-height: 1.1;
  margin-bottom: 2rem;
  max-width: 900px;
  opacity: 0;
  animation: fade-in-up 1s 0.2s forwards;
}

.banner-head-hud span {
  display: block;
  font-style: italic;
  font-weight: 300;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4);
}

.banner-para-hud {
  font-family: var(--font-poppins), sans-serif;
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 800px;
  line-height: 1.6;
  opacity: 0;
  animation: fade-in-up 1s 0.4s forwards;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1600px) {
  .banner-hud-container {
    padding: 4rem;
  }
  .banner-head-hud {
    font-size: 4rem;
    max-width: 800px;
  }
}

@media (max-width: 1366px) {
  .banner-hud-container {
    padding: 3rem;
  }
  .banner-head-hud {
    font-size: 3rem;
    max-width: 650px;
  }
  .hud-line {
    left: 2rem;
  }
}

@media (max-width: 640px) {
  .banner-hud-container {
    padding: 1rem;
    bottom: 0.5rem;
  }
  .hud-line {
    display: none;
  }
  .hud-content {
    margin-left: 0;
  }
  .hud-badge {
    margin-bottom: 0.5rem;
    font-size: 0.6rem;
    padding: 0.3rem 0.6rem;
  }
  .banner-head-hud {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
  }
  .banner-para-hud {
    display: none;
    font-size: 0.875rem;
    max-width: 100%;
    line-height: 1.5;
  }
}

/* Adaptive Premium HUD Cards */
.card-hud-cyan {
  background: color-mix(in srgb, var(--primary) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
}
.card-hud-cyan:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  box-shadow: 0 0 30px -10px color-mix(in srgb, var(--primary) 20%, transparent);
}

.card-hud-orchid {
  background: color-mix(in srgb, var(--secondary) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--secondary) 10%, transparent);
}
.card-hud-orchid:hover {
  border-color: color-mix(in srgb, var(--secondary) 40%, transparent);
  box-shadow: 0 0 30px -10px color-mix(in srgb, var(--secondary) 20%, transparent);
}

.card-hud-amber {
  background: color-mix(in srgb, var(--accent) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
}
.card-hud-amber:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 0 30px -10px color-mix(in srgb, var(--accent) 20%, transparent);
}



.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Theme-Responsive Logo System */
.logo-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: none !important;
}

/* Visibility Logic: Show ONLY when the correct combination of theme and mode matches */

/* Master Suppression: If any premium theme is active, hide all default logos immediately */
html[class*="theme-"] .logo-img.default-only {
    display: none !important;
}

/* 1. Default Logos (Only when no theme is active) */
html:not([class*="theme-"]) .logo-img.default-only.light-only { display: block !important; }
.dark html:not([class*="theme-"]) .logo-img.default-only.light-only { display: none !important; }
.dark html:not([class*="theme-"]) .logo-img.default-only.dark-only { display: block !important; }
/* Top of Page Override */
html:not([class*="theme-"]) header:not(.is-scrolled) .logo-img.default-only.dark-only { display: block !important; }
html:not([class*="theme-"]) header:not(.is-scrolled) .logo-img.default-only.light-only { display: none !important; }

/* 2. Sapphire Gold */
.theme-sapphire-gold .logo-img.sapphire-only.light-only { display: block !important; }
.dark.theme-sapphire-gold .logo-img.sapphire-only.light-only { display: none !important; }
.dark.theme-sapphire-gold .logo-img.sapphire-only.dark-only { display: block !important; }
/* Top of Page Override */
.theme-sapphire-gold header:not(.is-scrolled) .logo-img.sapphire-only.dark-only { display: block !important; }
.theme-sapphire-gold header:not(.is-scrolled) .logo-img.sapphire-only.light-only { display: none !important; }

/* 3. Emerald Night */
.theme-emerald-night .logo-img.emerald-only.light-only { display: block !important; }
.dark.theme-emerald-night .logo-img.emerald-only.light-only { display: none !important; }
.dark.theme-emerald-night .logo-img.emerald-only.dark-only { display: block !important; }
/* Top of Page Override */
.theme-emerald-night header:not(.is-scrolled) .logo-img.emerald-only.dark-only { display: block !important; }
.theme-emerald-night header:not(.is-scrolled) .logo-img.emerald-only.light-only { display: none !important; }

/* 4. Royal Amethyst */
.theme-royal-amethyst .logo-img.purple-only.light-only { display: block !important; }
.dark.theme-royal-amethyst .logo-img.purple-only.light-only { display: none !important; }
.dark.theme-royal-amethyst .logo-img.purple-only.dark-only { display: block !important; }
/* Top of Page Override */
.theme-royal-amethyst header:not(.is-scrolled) .logo-img.purple-only.dark-only { display: block !important; }
.theme-royal-amethyst header:not(.is-scrolled) .logo-img.purple-only.light-only { display: none !important; }

/* 5. Crimson Slate */
.theme-crimson-slate .logo-img.crimson-only.light-only { display: block !important; }
.dark.theme-crimson-slate .logo-img.crimson-only.light-only { display: none !important; }
.dark.theme-crimson-slate .logo-img.crimson-only.dark-only { display: block !important; }
/* Top of Page Override */
.theme-crimson-slate header:not(.is-scrolled) .logo-img.crimson-only.dark-only { display: block !important; }
.theme-crimson-slate header:not(.is-scrolled) .logo-img.crimson-only.light-only { display: none !important; }

/* 6. Cyber Neon */
.theme-cyber-neon .logo-img.cyber-only.light-only { display: block !important; }
.dark.theme-cyber-neon .logo-img.cyber-only.light-only { display: none !important; }
.dark.theme-cyber-neon .logo-img.cyber-only.dark-only { display: block !important; }
/* Top of Page Override */
.theme-cyber-neon header:not(.is-scrolled) .logo-img.cyber-only.dark-only { display: block !important; }
.theme-cyber-neon header:not(.is-scrolled) .logo-img.cyber-only.light-only { display: none !important; }

/* Mobile-Specific Navbar Fix (Light Mode only) */
/* When not scrolled on mobile, the background must be black to keep the white text/logo visible, 
   since the hero video doesn't bleed behind the navbar on small screens. */
@media (max-width: 767px) {
    html:not(.dark) header:not(.is-scrolled) {
        background-color: black !important;
    }
}