:root {
  --color-primary: #3E3235;
  --color-secondary: #8C7B7F;
  --color-accent: #D4A69A;
  --color-bg-light: #FDFAF9;
  --color-bg-alt: #F9F4F2;
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }

::selection {
  background: color-mix(in srgb, var(--color-accent) 35%, white);
}

[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); }

.focus-ring:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 65%, white);
  outline-offset: 2px;
}

.glass-surface {
  background: color-mix(in srgb, white 84%, transparent);
  backdrop-filter: blur(10px);
}

.hr-fade {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(17,24,39,0.12), transparent);
}

#mobile-menu a:focus-visible,
#mobile-menu button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 65%, white);
  outline-offset: 2px;
  border-radius: 9999px;
}