/**
 * Base CSS — reset moderno + element defaults + @layer cascade.
 *
 * @package lavventura
 */

@layer reset, tokens, base, layout, blocks, utilities, overrides;

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
	}

	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
		hanging-punctuation: first last;
		text-rendering: optimizeLegibility;
	}

	body {
		min-height: 100dvh;
		line-height: var(--line-height-body);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

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

	img,
	picture {
		object-fit: cover;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
		color: inherit;
	}

	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}

	#root,
	#__next {
		isolation: isolate;
	}
}

@layer base {
	body {
		background-color: var(--color-bg);
		color: var(--color-text);
		font-family: var(--font-body);
		font-size: var(--font-size-body);
	}

	a {
		color: var(--color-link);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.15em;

		@media (prefers-reduced-motion: no-preference) {
			& {
				transition: color var(--transition-base);
			}
		}

		&:hover,
		&:focus-visible {
			color: var(--color-link-hover);
		}
	}

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

	::selection {
		background-color: var(--color-accent);
		color: var(--color-carta-calda);
	}

	hr {
		border: none;
		border-top: var(--border-width-1) solid var(--color-border);
		margin-block: var(--space-l);
	}

	figure {
		margin: 0;
	}

	figcaption {
		font-size: var(--font-size-caption);
		color: var(--color-text-muted);
		margin-top: var(--space-2xs);
	}

	blockquote {
		font-style: italic;
		font-size: var(--font-size-lead);
		line-height: var(--line-height-headings);
		padding-inline-start: var(--space-m);
		border-inline-start: var(--border-width-2) solid var(--color-accent);
	}

	code,
	pre {
		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
		font-size: 0.875em;
	}

	/* Skip link a11y */
	.lv-skip-link {
		position: absolute;
		top: -100px;
		left: 0;
		padding: var(--space-xs) var(--space-s);
		background-color: var(--color-inchiostro-terra);
		color: var(--color-carta-calda);
		text-decoration: none;
		z-index: var(--z-toast);

		&:focus-visible {
			top: 0;
		}
	}
}