:root {
  --color-primary: #2F3E36;
  --color-secondary: #6B7F71;
  --color-accent: #E07B54;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

body {
  font-family: 'Urbanist', system-ui, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(224, 123, 84, 0.25);
}

a, button, input, select, textarea {
  outline-offset: 3px;
}

[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.rotate-180 {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}