/* Global variables and base styles */

/* Modern smooth scroll behavior for all devices */
html {
  scroll-behavior: smooth;
}

/* Modern scroll margin to handle fixed headers */
section[id] {
  scroll-margin-top: 90px; /* Header height + marge */
}

:root {
  /* Colors */
  --primary-color: #4F46E5;
  --secondary-color: #7C3AED;
  --accent-color: #06B6D4;
  --light-bg: #F9FAFB;
  --dark-bg: #111827;
  --text-dark: #1f2937;
  --text-light: #6b7280;

  /* RGB Colors */
  --primary-rgb: 79, 70, 229;
  --secondary-rgb: 124, 58, 237;
  --accent-rgb: 6, 182, 212;

  /* Transitions */
  --transition-speed-fast: 0.2s;
  --transition-speed-medium: 0.4s;
  --transition-speed-slow: 0.7s;
  --transition-curve-sharp: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-curve-elegant: cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-curve-rebound: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Perspective */
  --perspective-medium: 1000px;

  /* Glows & Shadows */
  --glow-primary: 0 0 30px 0px rgba(var(--primary-rgb), 0.3);
  --glow-secondary: 0 0 30px 0px rgba(var(--secondary-rgb), 0.3);
  --shadow-interactive: 0 15px 45px -15px rgba(var(--primary-rgb), 0.15);
  --shadow-interactive-strong: 0 25px 60px -15px rgba(var(--primary-rgb), 0.25);
}

@keyframes fadeInPage {
  from { opacity: 0; }
  to { opacity: 1; }
}

html {
  scroll-behavior: smooth;
  background-color: var(--light-bg);
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: var(--text-dark);
  background-color: var(--light-bg);
  animation: fadeInPage var(--transition-speed-slow) var(--transition-curve-elegant) 0.2s forwards;
  opacity: 0;
  position: relative;
  overflow-x: hidden;
  touch-action: pan-y pinch-zoom;
}

html {
  overflow-x: hidden;
}

#app {
  overflow-x: hidden;
  max-width: 100vw;
}