/* Design Tokens */
:root {
  --color-bg:           #FFFFFF;
  --color-bg-alt:       #F8F9FA;
  --color-bg-dark:      #030712;
  --color-text:         #1A1A1A;
  --color-text-muted:   #6B7280;
  --color-text-on-dark: #F3F4F6;
  --color-accent:       #E11D48;
  --color-accent-hover: #BE123C;
  --color-border:       #E5E7EB;
  --transition-fast:    150ms ease;
  --transition-normal:  300ms ease;
  --transition-slow:    500ms ease;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

/* Scroll reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Nav transition */
.nav-scrolled {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
}
.nav-scrolled .nav-link {
  color: #1A1A1A !important;
}
.nav-scrolled .nav-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.nav-scrolled .nav-logo-light { display: none; }
.nav-scrolled .nav-logo-dark { display: block; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Mobile menu overlay */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.mobile-menu.open {
  transform: translateX(0);
}

/* Counter animation */
.stat-number {
  font-variant-numeric: tabular-nums;
}