/* 
  Satyox & PropFit Design System
  Dual-Theme High-End Visual Engineering
  - Dark Mode (Default): Deep Onyx (#05050A) + Electric Cyan (#00E5FF) + Neon Mint (#00FF87)
  - Light Mode: Premium Studio Slate (#F8FAFC) + Deep Teal (#0284C7) + Forest Emerald (#059669)
*/

:root {
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Dark Mode Tokens (Default) */
  --color-bg: #05050A;
  --color-surface: #0F0F19;
  --color-surface-elevated: #161626;
  --color-surface-hover: #1C1C30;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.18);

  --color-text-primary: #FFFFFF;
  --color-text-secondary: #94A3B8;
  --color-text-muted: #64748B;

  --color-accent: #00E5FF;
  --color-emerald: #00FF87;
  --color-accent-border: rgba(0, 229, 255, 0.25);
  --color-emerald-border: rgba(0, 255, 135, 0.25);

  --shadow-glass: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 20px 40px -15px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 50px -10px rgba(0, 229, 255, 0.25), inset 0 1px 0 0 rgba(255, 255, 255, 0.15);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light Mode Overrides */
html.light {
  --color-bg: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #F1F5F9;
  --color-surface-hover: #E2E8F0;
  --color-border: #E2E8F0;
  --color-border-hover: #CBD5E1;

  --color-text-primary: #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted: #64748B;

  --color-accent: #0284C7;
  --color-emerald: #059669;
  --color-accent-border: rgba(2, 132, 199, 0.25);
  --color-emerald-border: rgba(5, 150, 105, 0.25);

  --shadow-glass: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
  --shadow-glow: 0 16px 32px -8px rgba(2, 132, 199, 0.15), 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Base resets */
html {
  scroll-behavior: smooth;
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  overflow-x: hidden;
  transition: background-color 200ms ease, color 200ms ease;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-secondary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(0, 229, 255, 0.25);
  color: #FFFFFF;
}

html.light ::selection {
  background: rgba(2, 132, 199, 0.2);
  color: #0F172A;
}

/* Shadows */
.shadow-glass {
  box-shadow: var(--shadow-glass);
}

.shadow-glow {
  box-shadow: var(--shadow-glow);
}

/* Gradients */
.text-gradient-cyan-emerald {
  background: linear-gradient(135deg, #00E5FF 0%, #00FF87 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

html.light .text-gradient-cyan-emerald {
  background: linear-gradient(135deg, #0284C7 0%, #059669 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   LIGHT THEME ACCURATE COMPONENT TARGETING (No blind global text-white overrides)
   ========================================================================== */

/* 1. Page Background */
html.light .bg-brand-bg {
  background-color: #F8FAFC !important;
}

/* 2. Bento Grid Cards & Elevated Surfaces */
html.light .bg-brand-surface,
html.light .bg-brand-surfaceElevated,
html.light .from-brand-surfaceElevated,
html.light .to-brand-surface {
  background-color: #FFFFFF !important;
  background-image: none !important;
  border-color: #E2E8F0 !important;
}

/* 3. Text in Light Mode (Scoped specifically so dark pills stay white) */
html.light h1:not(.bg-black *),
html.light h2:not(.bg-black *),
html.light h3:not(.bg-black *),
html.light h4:not(.bg-black *),
html.light h5:not(.bg-black *),
html.light h6:not(.bg-black *) {
  color: #0F172A !important;
}

html.light p:not(.bg-black *),
html.light span:not(.bg-black *):not(.ph):not([class*="ph-"]):not(.text-gradient-cyan-emerald) {
  color: inherit;
}

html.light .text-white:not(.bg-black *):not(.bg-slate-900 *):not(.bg-gradient-to-r *) {
  color: #0F172A !important;
}

html.light .text-gray-300:not(.bg-black *),
html.light .text-gray-200:not(.bg-black *) {
  color: #334155 !important;
}

html.light .text-gray-400:not(.bg-black *) {
  color: #64748B !important;
}

/* 4. CTA Pill Buttons: Always preserve pristine white text on dark pills */
.bg-black,
.bg-black * {
  color: #FFFFFF !important;
}

.bg-black .text-gray-400,
.bg-black span.text-gray-400 {
  color: #94A3B8 !important;
}

.bg-black .text-brand-emerald,
.bg-black i.text-brand-emerald {
  color: #00FF87 !important;
}

.bg-black .text-brand-accent,
.bg-black i.text-brand-accent {
  color: #00E5FF !important;
}

html.light .bg-black {
  background-color: #0F172A !important;
}

/* 5. Inner Preview Chips inside Bento Cards */
html.light .bg-black\/50,
html.light .bg-black\/60,
html.light .bg-black\/40 {
  background-color: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
}

html.light .bg-black\/50 *,
html.light .bg-black\/60 *,
html.light .bg-black\/40 * {
  color: #1E293B !important;
}

html.light .bg-black\/50 .text-brand-emerald,
html.light .bg-black\/60 .text-brand-emerald {
  color: #059669 !important;
}

/* 6. Tag Badges (e.g. Free 3-Room Tier) */
html.light .bg-white\/5,
html.light .bg-white\/10 {
  background-color: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
  color: #334155 !important;
}

/* 7. Nav Island & Mobile Menu */
html.light .nav-island {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08) !important;
}

html.light .nav-island .text-white {
  color: #0F172A !important;
}

html.light #mobile-menu {
  background-color: rgba(255, 255, 255, 0.98) !important;
}

html.light #mobile-menu .text-white {
  color: #0F172A !important;
}

/* 8. Bottom Download Banner (#download) */
html.light #download {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.06) !important;
}

html.light #download h2 {
  color: #0F172A !important;
}

html.light #download p {
  color: #475569 !important;
}

/* 9. Footers */
html.light footer {
  background-color: #F8FAFC !important;
  border-color: #E2E8F0 !important;
}

/* 10. Background Grids */
html.light .bg-grid-pattern {
  background-image: 
    linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}

/* Micro-Interactions & Physics */
.hover-scale {
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), border-color 180ms var(--ease-out);
  will-change: transform;
}

.hover-scale:hover {
  transform: translateY(-2px);
}

.hover-scale:active {
  transform: scale(0.98) translateY(0);
}

.hover-card {
  transition: transform 260ms var(--ease-out), border-color 260ms var(--ease-out), background-color 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}

.hover-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 229, 255, 0.35);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.8), 0 0 30px -5px rgba(0, 229, 255, 0.15);
}

html.light .hover-card:hover {
  border-color: rgba(2, 132, 199, 0.4) !important;
  box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.08), 0 0 20px rgba(2, 132, 199, 0.1) !important;
}

/* 3D Floating Animations */
@keyframes floatingSmooth {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(0.8deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.08); }
}

.floating-hero {
  animation: floatingSmooth 7s ease-in-out infinite;
  will-change: transform;
}

.floating-orb {
  animation: pulseGlow 8s ease-in-out infinite;
}

/* Interactive Accordion Styles */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 350ms var(--ease-out), opacity 300ms var(--ease-out), padding 350ms var(--ease-out);
  opacity: 0;
}

.accordion-item.active .accordion-content {
  max-height: 400px;
  opacity: 1;
  padding-top: 1rem;
}

.accordion-item.active .accordion-icon {
  transform: rotate(180deg);
  color: var(--color-accent);
}

/* Background Grids */
.bg-grid-pattern {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* R&D Incubator Card - Light Mode Overrides */
html.light .rd-incubator-card {
  background-color: #FFFFFF !important;
  background-image: none !important;
  border: 1.5px dashed #CBD5E1 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.04) !important;
}

html.light .rd-incubator-card .rd-icon-box {
  background-color: #F1F5F9 !important;
  border-color: #E2E8F0 !important;
  color: #0284C7 !important;
}

html.light .rd-incubator-card .rd-tag {
  color: #0284C7 !important;
}

html.light .rd-incubator-card .rd-title {
  color: #0F172A !important;
}

html.light .rd-incubator-card .rd-desc {
  color: #475569 !important;
}

html.light .rd-incubator-card .rd-footer {
  border-color: #E2E8F0 !important;
  color: #64748B !important;
}

html.light .bg-brand-surface\/40 {
  background-color: #FFFFFF !important;
}

/* Dropdown Menus & Floating Surfaces in Light Mode */
html.light .bg-brand-surfaceElevated\/95 {
  background-color: rgba(255, 255, 255, 0.98) !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1) !important;
}

html.light .bg-brand-surfaceElevated\/95 a {
  color: #0F172A !important;
}

html.light .bg-brand-surfaceElevated\/95 a:hover {
  background-color: #F1F5F9 !important;
}

html.light .bg-brand-surfaceElevated\/95 .text-white {
  color: #0F172A !important;
}

html.light .bg-brand-surfaceElevated\/95 .text-gray-400 {
  color: #64748B !important;
}

html.light .nav-island button,
html.light .nav-island a {
  color: #0F172A !important;
}

html.light .nav-island button:hover,
html.light .nav-island a:hover {
  color: #0284C7 !important;
}