/* 2026 Design System - Mobile First & Premium UX */

:root {
  /* Color Palette - Deep Space & Neon */
  --color-bg-main: #050505;
  --color-bg-secondary: #0a0a0a;
  --color-bg-tertiary: #111111;

  --color-primary: #04b647;
  /* Brand Green */
  --color-primary-glow: rgba(0, 255, 136, 0.4);
  --color-secondary: #7000ff;
  /* Electric Purple */
  --color-accent: #00d9ff;
  /* Cyan */

  --color-text-main: #ffffff;
  --color-text-muted: #a0a0a0;
  --color-text-inverted: #000000;

  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-hover: rgba(255, 255, 255, 0.2);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: 1px solid rgba(255, 255, 255, 0.05);
  --glass-backdrop: blur(20px);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

  /* Typography */
  --font-main: 'Outfit', 'Inter', sans-serif;
  --font-display: 'Outfit', sans-serif;

  /* Spacing & Layout */
  --container-width: 1200px;
  --header-height: 80px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* Animations */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s var(--ease-out-expo);
  --transition-normal: 0.4s var(--ease-out-expo);
  --transition-slow: 0.8s var(--ease-out-expo);
}

/* Dark Mode overrides (if needed, but we are dark-first) */
[data-theme="light"] {
  --color-bg-main: #ffffff;
  --color-bg-secondary: #f4f4f5;
  --color-bg-tertiary: #e4e4e7;

  --color-text-main: #09090b;
  --color-text-muted: #71717a;
  --color-text-inverted: #ffffff;

  --color-border: rgba(0, 0, 0, 0.1);
  --glass-bg: rgba(0, 0, 0, 0.03);
  --glass-border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Mesh Gradient Background */
.background-mesh {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
  background-color: var(--color-bg-main);
}

.mesh-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.7;
  transition: transform 0.1s ease-out;
  will-change: transform;
  animation: floatOrb 20s ease-in-out infinite;
}

@keyframes floatOrb {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -30px) scale(1.05);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.95);
  }
}

.orb-1 {
  width: 70vw;
  height: 70vw;
  background: radial-gradient(circle, var(--color-primary-glow), transparent 60%);
  top: -20%;
  left: -10%;
  animation-duration: 25s;
}

.orb-2 {
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(100, 130, 150, 0.5), transparent 60%);
  bottom: -10%;
  right: -10%;
  animation-duration: 30s;
  animation-delay: -10s;
}

.orb-3 {
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(4, 182, 71, 0.3), transparent 60%);
  top: 40%;
  left: 40%;
  animation-duration: 35s;
  animation-delay: -20s;
}

.mesh-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.3;
  mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
  animation: gridPulse 8s ease-in-out infinite;
}

@keyframes gridPulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.5;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .mesh-orb,
  .mesh-grid {
    animation: none !important;
  }
}