*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
color: var(--ls-color-text);
font-family: var(--ls-font-body);
font-size: var(--ls-font-size-body);
line-height: var(--ls-line-height-body);
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-block-start: 0;
color: var(--ls-color-text);
font-family: var(--ls-font-heading);
line-height: var(--ls-line-height-heading);
}
:is(.is-layout-flow, .is-layout-constrained) > :is(h1, h2, h3, h4, h5, h6) {
margin-block-start: 0;
}
p {
margin-block-start: 0;
margin-block-end: var(--ls-space-text-gap);
}
:is(.is-layout-flow, .is-layout-constrained) > p {
margin-block-end: var(--ls-space-text-gap);
}
a {
color: inherit;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.15em;
}
img,
svg,
picture {
display: block;
max-width: 100%;
}
button,
input,
textarea,
select {
font: inherit;
}
:focus-visible {
outline: 3px solid var(--ls-color-focus);
outline-offset: 3px;
}
::selection {
color: var(--ls-color-text-inverse);
background: var(--ls-color-focus);
}