/* =========================================================================
   DARK MODE NEUMORPHISM DESIGN SYSTEM
   =========================================================================

   Comprehensive dark mode neumorphism utilities for TuxedoDrive landing pages.
   Implements soft UI design with dramatic shadows on dark monochromatic surfaces.

   Philosophy: Dark mode neumorphism creates depth through dual opposing shadows:
   - Light shadow (top-left): subtle lift from dark surface
   - Dark shadow (bottom-right): near-black for dramatic depth

   Color Palette: Cool dark monochromatic (#2D3436 base)
   Accessibility: WCAG AA/AAA compliant contrast ratios
   ========================================================================= */

/* =========================================================================
   CSS VARIABLES - Dark Mode Color Tokens
   ========================================================================= */

:root[data-theme="dark"],
[data-theme="dark"] {
  /* Override base light mode variables for automatic dark mode support */
  --neu-bg: #2D3436;
  --neu-text: #E4E6E8;
  --neu-muted: #9CA3AF;
  --neu-accent: #7C73FF;
  --neu-accent-light: #9B94FF;
  --neu-accent-secondary: #4FD1C5;
  --neu-shadow-dark: rgba(0, 0, 0, 0.5);
  --neu-shadow-dark-strong: rgba(0, 0, 0, 0.6);
  --neu-shadow-light: rgba(69, 75, 78, 0.4);
  --neu-shadow-light-strong: rgba(69, 75, 78, 0.5);

  /* Dark mode specific tokens (for neu-dark-* classes) */
  --neu-dark-bg: #2D3436;              /* Base dark slate surface */
  --neu-dark-surface: #363B3D;         /* Elevated surface layer */
  --neu-dark-text: #E4E6E8;            /* Primary text (11:1 contrast - WCAG AAA) */
  --neu-dark-muted: #9CA3AF;           /* Secondary text (5.2:1 contrast - WCAG AA) */
  --neu-dark-placeholder: #6B7280;     /* Placeholder text (darker than muted) */

  /* Accent Colors */
  --neu-dark-accent: #7C73FF;          /* Primary interactive (soft violet) */
  --neu-dark-accent-light: #9B94FF;    /* Hover/gradient accent */
  --neu-dark-success: #4FD1C5;         /* Success/checkmarks (bright teal) */

  /* Shadow Colors (RGBA for smooth blending) */
  --neu-dark-shadow-light: rgba(69, 75, 78, 0.4);   /* Light lift shadow */
  --neu-dark-shadow-dark: rgba(0, 0, 0, 0.5);       /* Deep shadow */
  --neu-dark-shadow-light-strong: rgba(69, 75, 78, 0.5);
  --neu-dark-shadow-dark-strong: rgba(0, 0, 0, 0.6);
  --neu-dark-shadow-dark-deep: rgba(0, 0, 0, 0.7);
}

/* Dark mode body background */
[data-theme="dark"] body,
[data-theme="dark"] {
  background-color: var(--neu-bg);
  color: var(--neu-text);
}

/* =========================================================================
   HARDCODED COLOR OVERRIDES
   Override Tailwind's hardcoded bg-[#E0E5EC] with dark mode color
   ========================================================================= */

/* Override hardcoded light backgrounds in dark mode */
[data-theme="dark"] .bg-\[\#E0E5EC\],
[data-theme="dark"] .bg-\[\#e0e5ec\] {
  background-color: var(--neu-bg) !important;
}

/* Override semi-transparent light backgrounds */
[data-theme="dark"] .bg-\[\#E0E5EC\]\/95 {
  background-color: rgba(45, 52, 54, 0.95) !important;
}

[data-theme="dark"] .bg-\[\#E0E5EC\]\/50 {
  background-color: rgba(45, 52, 54, 0.5) !important;
}

/* Override hardcoded text colors */
[data-theme="dark"] .text-\[\#3D4852\] {
  color: var(--neu-text) !important;
}

[data-theme="dark"] .text-\[\#6B7280\] {
  color: var(--neu-muted) !important;
}

/* Override border colors */
[data-theme="dark"] .border-\[rgb\(163\,177\,198\,0\.3\)\] {
  border-color: rgba(69, 75, 78, 0.3) !important;
}

[data-theme="dark"] .border-white\/20 {
  border-color: rgba(69, 75, 78, 0.2) !important;
}

/* =========================================================================
   SHADOW UTILITIES - Core of Dark Neumorphism
   ========================================================================= */

/* Default Raised State (Buttons, Cards, Interactive Elements) */
.neu-dark-extruded {
  box-shadow: 8px 8px 16px var(--neu-dark-shadow-dark),
              -8px -8px 16px var(--neu-dark-shadow-light);
}

/* Elevated Hover State (Lifted Appearance) */
.neu-dark-extruded-hover {
  box-shadow: 10px 10px 20px var(--neu-dark-shadow-dark-strong),
              -10px -10px 20px var(--neu-dark-shadow-light-strong);
}

/* Small Extruded (Pills, Badges, Small Buttons) */
.neu-dark-extruded-sm {
  box-shadow: 4px 4px 8px var(--neu-dark-shadow-dark),
              -4px -4px 8px var(--neu-dark-shadow-light);
}

/* Shallow Pressed State (Inputs, Toggles) */
.neu-dark-inset {
  box-shadow: inset 5px 5px 10px var(--neu-dark-shadow-dark),
              inset -5px -5px 10px rgba(69, 75, 78, 0.3);
}

/* Deep Carved State (Input Focus, Active Wells) */
.neu-dark-inset-deep {
  box-shadow: inset 8px 8px 16px var(--neu-dark-shadow-dark-strong),
              inset -8px -8px 16px var(--neu-dark-shadow-light);
}

/* Subtle Inset (Button Active States) */
.neu-dark-inset-sm {
  box-shadow: inset 2px 2px 5px var(--neu-dark-shadow-dark),
              inset -2px -2px 5px rgba(69, 75, 78, 0.3);
}

/* =========================================================================
   TYPOGRAPHY UTILITIES
   ========================================================================= */

.neu-dark-heading {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--neu-dark-text);
}

.neu-dark-heading-md {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--neu-dark-text);
}

.neu-dark-body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  color: var(--neu-dark-text);
}

.neu-dark-muted {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  color: var(--neu-dark-muted);
}

/* =========================================================================
   ANIMATION & TRANSITIONS
   ========================================================================= */

.neu-dark-transition {
  transition: all 300ms ease-out;
}

/* =========================================================================
   COMPONENT PATTERNS
   ========================================================================= */

/* Icon Well (Carved Container for Icons) */
.neu-dark-icon-well {
  background: var(--neu-dark-bg);
  box-shadow: inset 5px 5px 10px var(--neu-dark-shadow-dark),
              inset -5px -5px 10px rgba(69, 75, 78, 0.3);
}

/* Stat Pill (Badge with Stats) */
.neu-dark-stat-pill {
  background: var(--neu-dark-surface);
  box-shadow: 4px 4px 8px var(--neu-dark-shadow-dark),
              -4px -4px 8px var(--neu-dark-shadow-light);
}

/* Feature List Item with Icon Well */
.neu-dark-feature-item {
  transition: all 300ms ease-out;
}

.neu-dark-feature-item:hover {
  background: var(--neu-dark-surface);
}

/* =========================================================================
   UTILITY CLASSES FOR THEME-AWARE COMPONENTS
   ========================================================================= */

/* Background Utilities */
.bg-neu-dark {
  background-color: var(--neu-dark-bg);
}

.bg-neu-dark-surface {
  background-color: var(--neu-dark-surface);
}

/* Text Color Utilities */
.text-neu-dark {
  color: var(--neu-dark-text);
}

.text-neu-dark-muted {
  color: var(--neu-dark-muted);
}

.text-neu-dark-accent {
  color: var(--neu-dark-accent);
}

.text-neu-dark-success {
  color: var(--neu-dark-success);
}

/* Border Utilities */
.border-neu-dark {
  border-color: rgba(69, 75, 78, 0.2);
}

/* Placeholder Utilities */
.placeholder-neu-dark::placeholder {
  color: var(--neu-dark-placeholder);
}

/* =========================================================================
   FOCUS STATES (Accessibility - WCAG AA)
   ========================================================================= */

.neu-dark-focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--neu-dark-bg),
              0 0 0 4px var(--neu-dark-accent);
}

/* Focus ring for inputs with inset shadows */
.neu-dark-input-focus:focus {
  outline: none;
  box-shadow: inset 8px 8px 16px var(--neu-dark-shadow-dark-strong),
              inset -8px -8px 16px var(--neu-dark-shadow-light),
              0 0 0 2px var(--neu-dark-bg),
              0 0 0 4px var(--neu-dark-accent);
}

/* =========================================================================
   INTERACTIVE STATES (Hover, Active, Focus)
   ========================================================================= */

/* Button Interactive States */
.neu-dark-button {
  background: var(--neu-dark-bg);
  color: var(--neu-dark-text);
  box-shadow: 4px 4px 8px var(--neu-dark-shadow-dark),
              -4px -4px 8px var(--neu-dark-shadow-light);
  transition: all 300ms ease-out;
}

.neu-dark-button:hover {
  transform: translateY(-1px);
  box-shadow: 10px 10px 20px var(--neu-dark-shadow-dark-strong),
              -10px -10px 20px var(--neu-dark-shadow-light-strong);
}

.neu-dark-button:active {
  transform: translateY(0.5px);
  box-shadow: inset 2px 2px 5px var(--neu-dark-shadow-dark),
              inset -2px -2px 5px rgba(69, 75, 78, 0.3);
}

/* Card Interactive States */
.neu-dark-card {
  background: var(--neu-dark-bg);
  box-shadow: 8px 8px 16px var(--neu-dark-shadow-dark),
              -8px -8px 16px var(--neu-dark-shadow-light);
  transition: all 300ms ease-out;
}

.neu-dark-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 10px 10px 20px var(--neu-dark-shadow-dark-strong),
              -10px -10px 20px var(--neu-dark-shadow-light-strong);
}

/* Input States */
.neu-dark-input {
  background: var(--neu-dark-bg);
  color: var(--neu-dark-text);
  box-shadow: inset 5px 5px 10px var(--neu-dark-shadow-dark),
              inset -5px -5px 10px rgba(69, 75, 78, 0.3);
  transition: all 300ms ease-out;
}

.neu-dark-input:focus {
  box-shadow: inset 8px 8px 16px var(--neu-dark-shadow-dark-strong),
              inset -8px -8px 16px var(--neu-dark-shadow-light);
  outline: 2px solid var(--neu-dark-accent);
  outline-offset: 2px;
}

/* =========================================================================
   GRADIENT OVERLAYS (for accent elements)
   ========================================================================= */

.neu-dark-gradient-accent {
  background: linear-gradient(135deg, var(--neu-dark-accent) 0%, var(--neu-dark-accent-light) 100%);
}

.neu-dark-gradient-success {
  background: linear-gradient(135deg, var(--neu-dark-success) 0%, #5FE1D5 100%);
}

/* =========================================================================
   DECORATIVE ELEMENTS (Circles, Blobs)
   ========================================================================= */

.neu-dark-circle-decorative {
  background: var(--neu-dark-bg);
  box-shadow: 6px 6px 12px var(--neu-dark-shadow-dark),
              -6px -6px 12px var(--neu-dark-shadow-light);
  border-radius: 9999px;
  transition: all 500ms ease-out;
}

.neu-dark-circle-decorative:hover {
  transform: scale(1.05) rotate(180deg);
}

/* =========================================================================
   SCROLL ANIMATIONS (Fade-in effects)
   ========================================================================= */

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

@keyframes fade-left-dark {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-right-dark {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scale-dark {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Apply animations when visible */
[data-theme="dark"] [data-animate="fade-up"].is-visible {
  animation: fade-up-dark 0.6s ease-out forwards;
}

[data-theme="dark"] [data-animate="fade-left"].is-visible {
  animation: fade-left-dark 0.6s ease-out forwards;
}

[data-theme="dark"] [data-animate="fade-right"].is-visible {
  animation: fade-right-dark 0.6s ease-out forwards;
}

[data-theme="dark"] [data-animate="scale"].is-visible {
  animation: scale-dark 0.6s ease-out forwards;
}

/* =========================================================================
   RESPONSIVE ADJUSTMENTS (Mobile Dark Mode)
   ========================================================================= */

@media (max-width: 768px) {
  /* Reduce shadow intensity on mobile for better performance */
  .neu-dark-extruded {
    box-shadow: 6px 6px 12px var(--neu-dark-shadow-dark),
                -6px -6px 12px var(--neu-dark-shadow-light);
  }

  .neu-dark-extruded-hover:hover {
    box-shadow: 8px 8px 16px var(--neu-dark-shadow-dark-strong),
                -8px -8px 16px var(--neu-dark-shadow-light-strong);
  }
}

/* =========================================================================
   ACCESSIBILITY ENHANCEMENTS
   ========================================================================= */

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root[data-theme="dark"] {
    --neu-dark-text: #FFFFFF;
    --neu-dark-muted: #B0B7BF;
    --neu-dark-accent: #9B94FF;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .neu-dark-transition,
  .neu-dark-button,
  .neu-dark-card,
  .neu-dark-input,
  .neu-dark-circle-decorative {
    transition: none;
  }

  [data-animate].is-visible {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* =========================================================================
   PRINT STYLES (Dark mode for print)
   ========================================================================= */

@media print {
  [data-theme="dark"] {
    --neu-dark-bg: #FFFFFF;
    --neu-dark-text: #000000;
    --neu-dark-muted: #4B5563;
  }

  .neu-dark-extruded,
  .neu-dark-extruded-sm,
  .neu-dark-card {
    box-shadow: none;
    border: 1px solid #E5E7EB;
  }
}