@layer base {
  html {
	font-family: var(--font-body), system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  }

	body {
		min-height: 100vh;
		font-family: var(--font-body);
		font-size: var(--text-body-size);
		font-weight: var(--text-body-weight);
		line-height: var(--text-body-lh);
	display: flex;
	  flex-direction: column;
	gap: var(--space-lg);
	text-rendering: optimizeLegibility;
	}
  :focus-visible {
	outline: var(--border-focus);
	outline-offset: 2px;
  }
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: var(--font-heading);
		font-weight: var(--text-heading-weight);
		line-height: var(--text-heading-lh);
		margin: 0 0 var(--space-xs);
		overflow-wrap: break-word;
		word-break: break-word;
	}

	h1 {
		font-size: var(--font-size-xl);
		line-height: var(--lh-tight);
	}

	h2 {
		font-size: var(--font-size-lg);
		line-height: var(--lh-tight);
	}

	h3 {
		font-size: var(--font-size-md);
		line-height: var(--lh-snug);
	}

	h4 {
		font-size: var(--font-size-sm);
		line-height: var(--lh-snug);
	}

	h5 {
		font-size: var(--font-size-sm);
		line-height: var(--lh-normal);
	}

	h6 {
		font-size: var(--font-size-sm);
		line-height: var(--lh-normal);
		font-weight: var(--fw-regular);
	}

	p,
	.excerpt {
		line-height: var(--text-body-lh);
	}

	small {
		font-size: var(--text-small-size);
		font-weight: var(--text-small-weight);
		line-height: var(--text-small-lh);
	}

	a {
		text-decoration: none;
		transition: color .3s ease;
	}

	a:hover,
	a:focus {
		text-decoration: underline;
	}
	ul,
	ol {
		margin: 0;
		padding-left: var(--space-xl);
	}

	table {
		width: 100%;
		border-collapse: collapse;
		margin-bottom: var(--space-md);
	}

	th,
	td {
		padding: var(--space-xs);
		text-align: left;
		border-width: 1px;
		border-style: solid;
	}

	img,
	video,
	canvas,
	svg {
		max-width: 100%;
		height: auto;
		display: block;
	}

	input,
	textarea,
	select {
		font-family: inherit;
		font-size: inherit;
		line-height: inherit;
		padding: var(--space-xs);
		border-width: 1px;
		border-style: solid;
		border-radius: var(--radius-sm);
	}

	button {
		font-family: inherit;
		font-size: inherit;
		font-weight: inherit;
		line-height: inherit;
		background: none;
		border: none;
		padding: 0;
		margin: 0;
		cursor: pointer;
	}

	::placeholder {
		opacity: .6;
	}

	:disabled {
		opacity: .6;
		cursor: not-allowed;
	}

	hr {
		border: 0;
		height: 1px;
		margin: var(--space-md) 0;
	}

	:focus-visible {
		outline-width: 2px;
		outline-style: solid;
		outline-offset: 2px;
	}

	.screen-reader-text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0,0,0,0);
		white-space: nowrap;
	}
	.screen-reader-text:focus {
		position: fixed;
		top: 20px;
		left: 20px;
		z-index: 9999;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		white-space: normal;
		padding: 12px 20px;
		border-radius: 8px;
		font-weight: 600;
		clip: auto;
		clip-path: none;
	}
	blockquote {
		margin: var(--space-md) 0;
		padding-left: var(--space-md);
		border-left-width: var(--space-xxs);
		border-left-style: solid;
		line-height: var(--text-body-lh);
	}

	code {
	font-family: monospace;
	font-size: var(--text-code-size);
	line-height: var(--text-code-lh);
	padding: 0 var(--space-xxs);
	border-radius: var(--radius-sm);
}

pre {
	font-family: monospace;
	font-size: var(--text-code-size);
	line-height: var(--text-code-lh);
	padding: var(--space-sm);
	overflow-x: auto;
	border-radius: var(--radius-sm);
}
  pre code {
	padding: 0;
	border-radius: 0;
	background: none;
  }
	figcaption {
		font-size: var(--text-caption-size);
		font-weight: var(--text-caption-weight);
		line-height: var(--text-caption-lh);
		margin-top: var(--space-xxs);
	}

	.text-lead {
		font-size: var(--text-lead-size);
		font-weight: var(--text-lead-weight);
		line-height: var(--text-lead-lh);
	}

	.text-caption {
		font-size: var(--text-caption-size);
		line-height: var(--text-caption-lh);
	}
}