/* Base layer, element resets and typography defaults only. No component classes here. */

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--surface-primary);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
img,video{ max-width:100%; display:block; }
::selection{ background:var(--accent-interactive); color:var(--color-black-950); }

:focus-visible{
  outline:2px solid var(--accent-interactive);
  outline-offset:2px;
  border-radius:2px;
}

h1,h2,h3,h4{ font-family:var(--font-display); margin:0; }
p{ margin:0; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

.wrap{ max-width:var(--container-max); margin:0 auto; padding:0 var(--gutter-desktop); }
@media (max-width:768px){ .wrap{ padding:0 var(--gutter-mobile); } }

.u-visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}