/**
 * Neumorphism 2.0 Design System
 * Optimized for Apple Retina & Liquid Retina XDR Displays (2025-2026)
 *
 * Constitution-based design system for Prompts Marketplace
 */

/* ============================================================================
   ARTICLE 4: COLOR PALETTES
   ========================================================================== */

:root {
  /* Light Theme - Default */
  --base: #e8eaee;
  --shadow-dark: #babec4;
  --shadow-light: #ffffff;
  --text: #1e1e1e;
  --text-secondary: #4a4a4a;
  --accent: #5aaaff;
  --accent-hover: #4a99ee;
  --glass-bg: rgba(255, 255, 255, 0.35);
  --glass-border: rgba(255, 255, 255, 0.18);

  /* Semantic Colors */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  /* Spacing & Typography */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 30px;

  /* Shadows */
  --shadow-neumorphic:
    6px 6px 12px rgba(0, 0, 0, 0.15),
    -6px -6px 12px rgba(255, 255, 255, 0.9);

  --shadow-neumorphic-inset:
    inset 6px 6px 12px rgba(0, 0, 0, 0.2),
    inset -6px -6px 12px rgba(255, 255, 255, 0.7);

  --shadow-neumorphic-hover:
    8px 8px 16px rgba(0, 0, 0, 0.18),
    -8px -8px 16px rgba(255, 255, 255, 0.95);

  /* Animation */
  --transition-smooth: 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-quick: 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Dark Theme */
@media (prefers-color-scheme: dark) {
  :root {
    --base: #16181c;
    --shadow-dark: #0d0f12;
    --shadow-light: #26292f;
    --text: #f3f3f3;
    --text-secondary: #b8b8b8;
    --accent: #00bcd4;
    --accent-hover: #00acc2;
    --glass-bg: rgba(25, 25, 28, 0.4);
    --glass-border: rgba(255, 255, 255, 0.08);

    --shadow-neumorphic:
      6px 6px 12px rgba(0, 0, 0, 0.4),
      -6px -6px 12px rgba(255, 255, 255, 0.05);

    --shadow-neumorphic-inset:
      inset 6px 6px 12px rgba(0, 0, 0, 0.5),
      inset -6px -6px 12px rgba(255, 255, 255, 0.03);

    --shadow-neumorphic-hover:
      8px 8px 16px rgba(0, 0, 0, 0.5),
      -8px -8px 16px rgba(255, 255, 255, 0.07);
  }
}

/* Neon Theme - Manual activation */
.theme-neon {
  --base: #0b0c0e;
  --shadow-dark: #000000;
  --shadow-light: #1a1c1f;
  --text: #eaeaea;
  --text-secondary: #b0b0b0;
  --accent: #00eaff;
  --accent-hover: #00d4e6;
  --neon-blue: #00ffff;
  --neon-pink: #ff00e6;
  --neon-green: #39ff14;
  --glass-bg: rgba(15, 15, 18, 0.3);
  --glass-border: rgba(0, 255, 255, 0.12);

  --shadow-neumorphic:
    6px 6px 12px rgba(0, 0, 0, 0.6),
    -6px -6px 12px rgba(26, 28, 31, 0.5);

  --shadow-neumorphic-inset:
    inset 6px 6px 12px rgba(0, 0, 0, 0.7),
    inset -6px -6px 12px rgba(26, 28, 31, 0.4);
}

/* ============================================================================
   ARTICLE 7: TYPOGRAPHY
   ========================================================================== */

body {
  font-family: 'InterVariable', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-variation-settings: 'wght' 450;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--base);
  color: var(--text);
  line-height: 1.6;
  transition: background-color var(--transition-smooth),
              color var(--transition-smooth);
}

h1, h2, h3, h4, h5, h6 {
  font-variation-settings: 'wght' 700;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 0.75em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
  line-height: 1.7;
  margin-bottom: 1em;
  color: var(--text-secondary);
}

/* ============================================================================
   ARTICLE 5: NEUMORPHIC BASE COMPONENTS
   ========================================================================== */

.neu-surface {
  background: var(--base);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-neumorphic);
  transition: all var(--transition-smooth);
}

.neu-surface:hover {
  box-shadow: var(--shadow-neumorphic-hover);
}

.neu-surface:active,
.neu-surface.active {
  box-shadow: var(--shadow-neumorphic-inset);
}

.neu-surface-sm {
  border-radius: var(--radius-sm);
}

.neu-surface-lg {
  border-radius: var(--radius-lg);
}

.neu-surface-xl {
  border-radius: var(--radius-xl);
}

/* Raised Surface (more depth) */
.neu-raised {
  background: var(--base);
  border-radius: var(--radius-md);
  box-shadow:
    10px 10px 20px rgba(0, 0, 0, 0.2),
    -10px -10px 20px rgba(255, 255, 255, 0.95);
  transition: all var(--transition-smooth);
}

@media (prefers-color-scheme: dark) {
  .neu-raised {
    box-shadow:
      10px 10px 20px rgba(0, 0, 0, 0.5),
      -10px -10px 20px rgba(255, 255, 255, 0.08);
  }
}

/* Flat/Pressed Surface */
.neu-pressed {
  background: var(--base);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-neumorphic-inset);
}

/* Inset Surface Variant */
.neu-surface-inset {
  background: var(--base);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-neumorphic-inset);
  padding: 0.25rem;
}

/* ============================================================================
   ARTICLE 6: GLASSMORPHISM
   ========================================================================== */

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  transition: all var(--transition-smooth);
}

.glass:hover {
  background: color-mix(in srgb, var(--glass-bg) 90%, white 10%);
  border-color: color-mix(in srgb, var(--glass-border) 80%, white 20%);
}

.glass-sm {
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
}

.glass-lg {
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
}

/* Glass Hierarchy - closer elements have less blur */
.glass-front {
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  z-index: 10;
}

.glass-mid {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  z-index: 5;
}

.glass-back {
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  z-index: 1;
}

/* ============================================================================
   ARTICLE 9: RETINA OPTIMIZATION
   ========================================================================== */

@supports (-webkit-touch-callout: none) {
  /* iOS/Safari specific optimizations */
  .neu-surface,
  .neu-raised,
  .glass {
    -webkit-tap-highlight-color: transparent;
  }
}

@media (min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  /* Retina Display Optimizations */
  .neu-surface,
  .neu-raised,
  .glass {
    transform: translateZ(0);
    will-change: transform;
  }

  /* Refined shadow for Retina - subtle highlight with strong depth */
  .neu-surface {
    box-shadow:
      6px 6px 12px rgba(0, 0, 0, 0.14),
      -1px -1px 12px rgba(255, 255, 255, 0.15);
  }
  
  .neu-raised {
    box-shadow:
      8px 8px 16px rgba(0, 0, 0, 0.16),
      -2px -2px 12px rgba(255, 255, 255, 0.2);
  }
}

/* ============================================================================
   ARTICLE 8: NEON EFFECTS FOR XDR DISPLAYS
   ========================================================================== */

.theme-neon .neu-surface,
.theme-neon .glass {
  box-shadow:
    0 0 10px color-mix(in srgb, var(--accent) 70%, black),
    0 0 25px color-mix(in srgb, var(--accent) 60%, black),
    6px 6px 12px rgba(0, 0, 0, 0.6),
    -6px -6px 12px rgba(26, 28, 31, 0.5);
}

.theme-neon h1,
.theme-neon h2,
.theme-neon .neon-text {
  text-shadow:
    0 0 6px var(--accent),
    0 0 16px var(--accent),
    0 0 30px color-mix(in srgb, var(--accent) 70%, white);
}

.theme-neon .neon-glow {
  animation: neon-pulse 2s ease-in-out infinite;
}

@keyframes neon-pulse {
  0%, 100% {
    text-shadow:
      0 0 6px var(--accent),
      0 0 16px var(--accent),
      0 0 30px color-mix(in srgb, var(--accent) 70%, white);
  }
  50% {
    text-shadow:
      0 0 10px var(--accent),
      0 0 25px var(--accent),
      0 0 45px color-mix(in srgb, var(--accent) 80%, white);
  }
}

/* ============================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Text Colors */
.text-primary { color: var(--text); }
.text-secondary { color: var(--text-secondary); }
.text-accent { color: var(--accent); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }

/* Background Utilities */
.bg-base { background: var(--base); }
.bg-accent { background: var(--accent); }

/* Spacing */
.p-neu { padding: 1.5rem; }
.p-neu-sm { padding: 1rem; }
.p-neu-lg { padding: 2rem; }
.p-neu-xl { padding: 3rem; }

.m-neu { margin: 1.5rem; }
.m-neu-sm { margin: 1rem; }
.m-neu-lg { margin: 2rem; }
.m-neu-xl { margin: 3rem; }

/* Layout */
.container-neu {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
}

@media (max-width: 768px) {
  .container-neu {
    padding: 1rem;
  }
}

/* Smooth Transitions */
.transition-smooth {
  transition: all var(--transition-smooth);
}

.transition-quick {
  transition: all var(--transition-quick);
}

/* ============================================================================
   ENHANCED UTILITIES - Design Improvements 2025
   ========================================================================== */

/* Gradient Backgrounds */
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--success) 100%);
}

.bg-gradient-secondary {
  background: linear-gradient(135deg, var(--base) 0%, color-mix(in srgb, var(--accent) 20%, var(--base)) 100%);
}

.bg-gradient-accent {
  background: linear-gradient(135deg, var(--accent) 0%, var(--info) 100%);
}

/* Glassmorphism Variants */
.glass-card {
  background: color-mix(in srgb, var(--base) 40%, transparent);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
}

.glass-subtle {
  background: color-mix(in srgb, var(--base) 20%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--glass-border) 50%, transparent);
}

/* Hover Glow Effect */
.hover-glow {
  transition: box-shadow var(--transition-smooth);
}

.hover-glow:hover {
  box-shadow: 
    0 0 20px color-mix(in srgb, var(--accent) 30%, transparent),
    0 0 40px color-mix(in srgb, var(--accent) 15%, transparent),
    var(--shadow-neumorphic);
}

/* Text Gradients */
.gradient-text {
  background: linear-gradient(135deg, var(--accent) 0%, var(--success) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-accent {
  background: linear-gradient(135deg, var(--accent) 0%, var(--info) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Text Glow */
.text-glow {
  text-shadow: 0 0 20px color-mix(in srgb, var(--accent) 40%, transparent);
}

.text-glow-strong {
  text-shadow: 
    0 0 10px color-mix(in srgb, var(--accent) 60%, transparent),
    0 0 20px color-mix(in srgb, var(--accent) 40%, transparent),
    0 0 30px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Shimmer Effect */
.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent) 20%, transparent),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Floating Animation */
.float {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Pulse Slow */
.pulse-slow {
  animation: pulse-slow 3s ease-in-out infinite;
}

@keyframes pulse-slow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.02);
  }
}

/* Bounce Subtle */
.bounce-subtle {
  animation: bounce-subtle 2s ease-in-out infinite;
}

@keyframes bounce-subtle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Skeleton Loader */
.skeleton {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--base) 90%, var(--shadow-dark)) 0%,
    color-mix(in srgb, var(--base) 95%, var(--shadow-light)) 50%,
    color-mix(in srgb, var(--base) 90%, var(--shadow-dark)) 100%
  );
  background-size: 200% 100%;
  animation: skeleton 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Badge Styles */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--base);
  box-shadow: var(--shadow-neumorphic);
}

.badge-primary {
  background: var(--accent);
  color: white;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 40%, transparent);
}

.badge-success {
  background: var(--success);
  color: white;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--success) 40%, transparent);
}

.badge-warning {
  background: var(--warning);
  color: white;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--warning) 40%, transparent);
}

/* Tooltip */
.tooltip {
  position: relative;
}

.tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  padding: 0.5rem 0.75rem;
  background: var(--text);
  color: var(--base);
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-smooth), transform var(--transition-smooth);
  z-index: 1000;
}

.tooltip::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-smooth);
}

.tooltip:hover::before,
.tooltip:hover::after {
  opacity: 1;
}

.tooltip:hover::before {
  transform: translateX(-50%) translateY(-12px);
}

/* Enhanced Focus States */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

button:focus-visible,
a:focus-visible {
  outline-offset: 4px;
}

/* Loading Spinner */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.spinner-sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.spinner-lg {
  width: 60px;
  height: 60px;
  border-width: 6px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Image Zoom on Hover */
.img-zoom {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.img-zoom img {
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.img-zoom:hover img {
  transform: scale(1.1);
}

/* End of Enhanced Utilities */