/**
 * Modern Base Styles - Enhanced with gradients and depth
 */

@import './design-system.css';

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: fixed;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;

  /* Modern gradient background */
  background:
    radial-gradient(ellipse at top right, rgba(99, 102, 241, 0.15), transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(168, 85, 247, 0.15), transparent 50%),
    radial-gradient(ellipse at top left, rgba(59, 130, 246, 0.1), transparent 50%),
    var(--bg-primary);

  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Animated background particles (optional) */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.15), transparent),
    radial-gradient(2px 2px at 60% 70%, rgba(255, 255, 255, 0.1), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.1), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(255, 255, 255, 0.1), transparent);
  background-size: 200% 200%, 180% 180%, 150% 150%, 220% 220%;
  background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0%;
  animation: particleFloat 20s ease infinite;
  pointer-events: none;
  opacity: 0.3;
  z-index: 0;
}

@keyframes particleFloat {
  0%, 100% {
    background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0%;
  }
  25% {
    background-position: 100% 0%, 0% 100%, 100% 100%, 0% 0%;
  }
  50% {
    background-position: 100% 100%, 0% 0%, 100% 0%, 0% 100%;
  }
  75% {
    background-position: 0% 100%, 100% 0%, 0% 0%, 100% 100%;
  }
}

* {
  box-sizing: border-box;
}

.container {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;
  z-index: 1;
}