/*
	BASE INDEX
	config:    1. design tokens  2. fonts
	reset:     3. reset (Piccalilli modern reset)
	elements:  4. global styles + typography
	form:      5. forms
	overlay:   6. overlays (dialog, tooltip)
*/

@layer config,
	reset,
	elements,
	form,
	overlay,
	compositions,
	components,
	utilities;

@layer config {
	/* --------------------------------------------------------------------------
	design tokens
	-------------------------------------------------------------------------- */
	:root {
		/* -----------------------------------------------------------------------
		color
		----------------------------------------------------------------------- */
		color-scheme: light;
		interpolate-size: allow-keywords;

		/* base — warm monochrome, cream to ink (oklch hue 78°) */
		--cream: #fbfaf8;
		--paper: #f6f4f1;
		--base-50: #edeae6;
		--base-100: #e4e1dc;
		--base-150: #dad7d2;
		--base-200: #cfcbc6;
		--base-300: #b8b3ad;
		--base-400: #a19c95;
		--base-500: #88827a;
		--base-600: #706b63;
		--base-700: #5b564f;
		--base-800: #44403a;
		--base-850: #33302b;
		--base-900: #24211d;
		--base-950: #1b1916;
		--ink: #14120f;

		/* accent colors */
		--primary: oklch(0.6626 0.1817 255.91);
		--yellow: oklch(0.8654 0.1581 99.52);
		--green: oklch(0.831 0.1788 159.77);
		--magenta: oklch(0.5091 0.1937 326.83);
		--indigo: oklch(0.3799 0.139 257.73);

		/* semantic — backgrounds */
		--color-bg: var(--paper);
		--color-bg-card: var(--cream);
		--color-bg-2: var(--base-50);
		--color-bg-dark: var(--base-950);

		/* semantic — text (on light) */
		--color-text: var(--ink);
		--color-text-muted: var(--base-600); /* base-600 hits WCAG AA 4.5:1 on paper (base-500 was 3.46) */
		--color-text-faint: var(--base-300);

		/* semantic — text (on dark) */
		--color-text-invert: var(--paper);
		--color-text-muted-invert: var(--base-400);
		--color-text-faint-invert: var(--base-700);

		/* semantic — borders */
		--color-border: var(--base-150);
		--color-border-hover: var(--base-200);
		--color-border-active: var(--primary);

		/* semantic — accents */
		--color-accent: var(--primary);
		--color-link: oklch(from var(--primary) 0.3 0.12 h);
		--color-yellow: var(--yellow);
		--color-green: var(--green);
		--color-magenta: var(--magenta);
		--color-indigo: var(--indigo);

		/* semantic — status (L=0.55, C=0.14, hue varies) */
		--color-success: #00884b;
		--color-warning: #ad5600;
		--color-error: #b54a46;
		--color-shadow: black;

		/* -----------------------------------------------------------------------
		spacing — two fluid primitives composed with calc()
		----------------------------------------------------------------------- */
		--gutter: clamp(1rem, 2.5vmax, 1.5rem); /* horizontal/layout — 16–24px */
		--stack: clamp(
			1.25ex,
			2.5vmax,
			1.75ex
		); /* vertical typographic rhythm — scales with current font-size */

		/* -----------------------------------------------------------------------
		typography
		----------------------------------------------------------------------- */

		/* font stacks */
		--font-family-main: "Geist", system-ui, sans-serif;
		--font-family-heading: "Geist", system-ui, sans-serif;
		--font-family-code:
			ui-monospace, menlo, monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;

		/* font properties */
		--font-weight-regular: 400;
		--font-weight-medium: 500;
		--font-weight-bold: 700;
		--font-weight: var(--font-weight-regular);

		/* font size — body (fixed rem) */
		--font-size-xs: 0.8125rem;
		--font-size-sm: 0.875rem;
		--font-size-md: 1rem;
		--font-size-lg: 1.125rem;

		/* font size — headings (fluid clamp, max = Paper spec) */
		--font-size-xl: clamp(1.125rem, 1rem + 0.25vw, 1.25rem); /* 18–20px → h3 */
		--font-size-xxl: clamp(1.5rem, 1.25rem + 0.5vw, 2rem); /* 24–32px → h2 */
		--font-size-xxxl: clamp(2.25rem, 1.75rem + 1vw, 3rem); /* 36–48px → h1 */
		--font-size-poster: clamp(3.5rem, 8vw, 7rem);

		/* line length */
		--line-length-xs: 24ch;
		--line-length-sm: 48ch;
		--line-length-md: 64ch;
		--line-length-lg: 72ch;
		--line-length-xl: 80ch;
		--measure: var(--line-length-md);

		/* grid */
		--page-gutter: min(4vw, 4em);
		--content-width: 68rem;

		/* line height */
		--line-height-xs: 0.88;
		--line-height-sm: 1.1;
		--line-height-md: 1.375;
		--line-height-lg: 1.72;
		--line-height-fluid: calc(0.6rem + 1em);

		/* letter spacing */
		--letter-spacing-sm: -0.025em;
		--letter-spacing-md: 0;
		--letter-spacing-lg: 0.1em;
		--letter-spacing-xl: 0.3em;

		/* -----------------------------------------------------------------------
		borders
		----------------------------------------------------------------------- */

		/* border radius */
		--border-radius-0: 0;
		--border-radius-sm: 0.2rem;
		--border-radius-md: 0.4rem;
		--border-radius-lg: 0.8rem;
		--border-radius-xl: 1.6rem;

		/* border width */
		--border-width-sm: 0.0625rem;
		--border-width-md: 0.1rem;
		--border-width-lg: 0.25rem;

		/* -----------------------------------------------------------------------
		z-index
		----------------------------------------------------------------------- */
		--z-0: 0;
		--z-1: 1;
		--z-2: 2;
		--z-3: 3;
		--z-4: 4;
		--z-5: 5;

		/* -----------------------------------------------------------------------
		shadows
		----------------------------------------------------------------------- */
		--shadow-md:
			0 -1px 3px 0 oklch(from var(--color-shadow) l c h / 2%),
			0 1px 2px -5px oklch(from var(--color-shadow) l c h / 2%),
			0 2px 5px -5px oklch(from var(--color-shadow) l c h / 4%),
			0 4px 12px -5px oklch(from var(--color-shadow) l c h / 5%),
			0 12px 15px -5px oklch(from var(--color-shadow) l c h / 7%);
		--shadow-lg:
			0 5px 5px -2px oklch(from var(--color-shadow) l c h / 6%),
			0 10px 10px -2px oklch(from var(--color-shadow) l c h / 7%),
			0 20px 20px -2px oklch(from var(--color-shadow) l c h / 8%),
			0 40px 40px -2px oklch(from var(--color-shadow) l c h / 9%);

		/* -----------------------------------------------------------------------
		transitions
		----------------------------------------------------------------------- */
		--transition-fast: 150ms ease;
		--transition-base: 250ms ease;
		--transition-fade: 300ms ease;

		/* -----------------------------------------------------------------------
		shapes
		----------------------------------------------------------------------- */
		--shape-chevron: polygon(
			35% 0,
			80% 50%,
			35% 100%,
			28% 93%,
			62% 55%,
			66% 50%,
			66% 50%,
			62% 45%,
			28% 7%
		);
	}

	/* --------------------------------------------------------------------------
	fonts
	-------------------------------------------------------------------------- */
}

@layer reset {
	/* --------------------------------------------------------------------------
	reset (Piccalilli modern reset)
	-------------------------------------------------------------------------- */

	/* Box sizing rules */
	:where(*, *::before, *::after) {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	/* Prevent font size inflation */
	:where(html) {
		-moz-text-size-adjust: none;
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
	}

	/* Remove list styles on ul, ol elements with a list role */
	:where(ul, ol)[role="list"] {
		list-style: none;
	}

	/* Balance text wrapping on headings */
	:where(h1, h2, h3, h4, h5, h6) {
		text-wrap: balance;
	}

	/* Match SVG icons with text color */
	:where(svg) {
		fill: currentColor;
	}

	/* Pointer cursors for interactive elements */
	:where(input:is([type="checkbox"], [type="radio"]), select, label, button) {
		cursor: pointer;
	}

	/* Visible buttons in forced-colors / high-contrast mode */
	@media (forced-colors: active) {
		:where(button) {
			border: 1px solid;
		}
	}

	/* A elements that don't have a class get default styles */
	:where(a:not([class])) {
		text-decoration-skip-ink: auto;
		color: currentColor;
	}

	/* Make images easier to work with */
	:where(img, picture) {
		max-inline-size: 100%;
		display: block;
	}

	/* Inherit fonts for inputs and buttons */
	:where(input, button, textarea, select) {
		font: inherit;
	}
}

@layer elements {
	/* --------------------------------------------------------------------------
	global styles + typography
	-------------------------------------------------------------------------- */
	::selection {
		color: var(--color-bg);
		background-color: color-mix(
			in oklch,
			var(--color-text),
			var(--color-bg) 20%
		);
	}

	:focus-visible {
		outline: var(--border-width-md) var(--color-accent) solid;
		outline-offset: var(--border-width-md);
	}

	@media (prefers-reduced-motion: no-preference) {
		@view-transition {
			navigation: auto;
		}

		::view-transition-old(root),
		::view-transition-new(root) {
			animation-duration: 0.1s;
		}
	}

	html {
		min-block-size: 100dvh;
		scroll-padding-top: calc(var(--gutter) * 3);
		color: var(--color-text);
		background-color: var(--color-bg);
		accent-color: var(--color-accent);
		overflow-x: clip;
		font-weight: var(--font-weight);

		@media (prefers-reduced-motion: no-preference) {
			scroll-behavior: smooth;
		}
	}

	body {
		position: relative;
		display: grid;
		grid-template-columns:
			[bleed-start] 1fr
			[content-start] min(100% - var(--page-gutter) * 2, var(--content-width))
			[content-end] 1fr [bleed-end];
		grid-template-rows: auto 1fr auto;
		min-block-size: 100dvh;
		font-family: var(--font-family-main);
		font-size-adjust: from-font;
		line-height: var(--line-height-fluid);

		:where(& main, & > header, & > footer) {
			grid-column: bleed;
			display: grid;
			grid-template-columns: subgrid;

			& > * {
				grid-column: content;
				min-inline-size: 0;
			}

			& > :where(section) {
				grid-column: bleed;
				display: grid;
				grid-template-columns: subgrid;
				padding-block: calc(var(--stack) * 6);

				& > * {
					grid-column: content;
					min-inline-size: 0;
				}
			}
		}
	}

	:where(details-menu) {
		display: contents;
	}

	:where(header) {
		container-type: inline-size;
	}

	main {
		z-index: var(--z-1);
	}

	:where(header, footer) {
		padding-block: calc(var(--stack) * 0.75);
		z-index: var(--z-2);
	}

	hr {
		inline-size: 4rem;
		margin-block: calc(var(--stack) * 2);
		margin-inline: auto;
		border: 0;
		border-block-start: var(--border-width-sm) solid var(--color-accent);
	}

	:where(img, embed, object, svg, video) {
		max-inline-size: 100%;
		block-size: auto;
		line-height: var(--line-height-fluid);
	}

	:is(video, iframe[src*="youtube"], iframe[src*="vimeo"]) {
		display: block;
		inline-size: 100%;
		block-size: auto;
		aspect-ratio: 16 / 9;
	}

	svg {
		flex-shrink: 0;
	}

	figcaption {
		padding-block-start: calc(var(--stack) / 2);
		font-size: var(--font-size-sm);
	}

	:where(details) {
		& > summary {
			display: flex;
			flex-wrap: nowrap;
			gap: calc(var(--gutter) / 2);
			align-items: center;
			cursor: pointer;
			color: var(--color-text);

			&::-webkit-details-marker {
				display: none;
			}

			&::before {
				position: relative;
				content: "";
				inline-size: 1em;
				block-size: 1em;
				scale: 0.9;
				background-color: currentcolor;
				clip-path: var(--shape-chevron);
			}
		}

		&[open] > summary::before {
			transform: rotate(90deg);
		}
	}

	/* typography */
	:where(article, .formatted) {
		max-inline-size: var(--line-length-xl);

		& > :where(h1, h2, blockquote, hr) {
			margin-block: calc(var(--stack) * 2);
		}

		& > :where(h3, form, img, video, picture) {
			margin-block: var(--stack);
		}

		& > :where(p, ul, ol, dl, pre, details, h4, h5, h6) {
			margin-block: calc(var(--stack) * 0.75);
		}
	}

	:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, pre, blockquote, form) {
		overflow-wrap: break-word;
	}

	:where(h1, h2, h3, h4, h5, h6) {
		font-family: var(--font-family-heading);
		line-height: var(--line-height-fluid);
	}

	h1 {
		font-size: var(--font-size-xxxl);
		font-weight: var(--font-weight-bold);
		letter-spacing: -0.03em;
		line-height: 1.06;
	}

	h2 {
		font-size: var(--font-size-xxl);
		font-weight: var(--font-weight-bold);
		letter-spacing: -0.03em;
		line-height: 1.14;
	}

	h3 {
		font-size: var(--font-size-xl);
		font-weight: var(--font-weight-bold);
		letter-spacing: -0.02em;
		line-height: 1.2;
	}

	:where(h4, h5, h6) {
		font-size: var(--font-size-md);
		font-weight: var(--font-weight-bold);
	}

	:where(p, ul, ol, dl, pre, blockquote) {
		line-height: var(--line-height-fluid);
		text-wrap: pretty;
	}

	:where(ul:not([class]), ol:not([class])) {
		padding-inline-start: 1.75ch;
	}

	ul {
		list-style-type: square;
	}

	:where(b, strong) {
		font-weight: var(--font-weight-bold);
	}

	small {
		font-size: var(--font-size-sm);
	}

	mark {
		color: inherit;
		background-color: color-mix(
			in oklch,
			var(--color-text),
			var(--color-bg) 80%
		);
	}

	:where(a, a:visited) {
		color: var(--color-link);
		text-decoration-thickness: var(--border-width-md);
		text-underline-offset: 0.15rem;
		transition:
			text-decoration-thickness 0.1s ease,
			color 0.1s ease;
	}

	@media (hover) and (pointer: fine) {
		a:hover {
			text-decoration-thickness: calc(var(--border-width-md) * 1.5);
		}
	}

	:where(pre, code) {
		color: color-mix(in oklch, var(--color-link), var(--color-text) 50%);
		background-color: var(--color-bg-2);
		border-radius: var(--border-radius-sm);
	}

	pre {
		margin-inline: calc(calc(var(--gutter) * 0.75) * -1);
		padding-block: calc(var(--stack) / 2);
		padding-inline: calc(var(--gutter) * 0.75);
		line-height: var(--line-height-md);
		overflow: auto;
	}

	code {
		font-family: var(--font-family-code);
		padding: 0.1rem calc(var(--gutter) / 2);
		font-size: 90%;
		-webkit-box-decoration-break: clone;

		:is(pre) & {
			border: none;
			background-color: transparent;
			padding-block: 0;
			padding-inline: 0;
			overflow: auto;
		}
	}

	:where(blockquote) {
		margin-inline: calc(calc(var(--gutter) * 0.75) * -1) 0;
		padding-inline-start: calc(var(--gutter) * 0.75);
		font-size: var(--font-size-md);
		border-inline-start: var(--border-width-md) solid var(--color-accent);
		text-box: trim-both cap alphabetic;

		& > p {
			font-size: var(--font-size-xl);
			font-weight: var(--font-weight-regular);
			text-wrap: balance;
		}

		& cite {
			display: block;
			font-size: var(--font-size-xs);
			font-weight: var(--font-weight-bold);
			font-style: normal;
			text-transform: uppercase;
		}
	}

	:where(dt) {
		font-weight: var(--font-weight-bold);

		dd + & {
			margin-block-start: calc(var(--stack) * 0.75);
		}
	}

	table {
		inline-size: 100%;
		border-collapse: collapse;
	}

	th,
	td {
		text-align: start;
		padding: calc(var(--gutter) * 0.75);
	}

	th {
		font-weight: var(--font-weight-bold);
	}

	thead {
		border-block-end: var(--border-width-md) solid var(--color-border);
	}

	td {
		border-block-end: var(--border-width-sm) solid var(--color-border);
	}

	tr:last-child td {
		border-block-end: none;
	}

	.table {
		overflow-x: auto;
		border: var(--border-width-sm) solid var(--color-border);
		border-radius: var(--border-radius-md);

		&[data-variant="grid"] :is(th, td) + :is(th, td) {
			border-inline-start: var(--border-width-sm) solid var(--color-border);
		}
	}

	caption {
		caption-side: bottom;
		margin-block-start: calc(var(--stack) * 0.75);
	}

	:target {
		animation: target 1.6s 0.4s ease-out;
	}

	@keyframes target {
		0% {
			background-color: oklch(from var(--color-accent) l c h / 30%);
		}
		100% {
			background-color: transparent;
		}
	}
}

@layer form {
	/* --------------------------------------------------------------------------
	forms
	-------------------------------------------------------------------------- */
	form {
		inline-size: 100%;
		display: flex;
		flex-direction: column;
		gap: var(--gutter);
	}

	label {
		display: block;
		flex-grow: 1;
		flex-shrink: 1;
		font-weight: var(--font-weight-medium);
		line-height: var(--line-height-lg);
	}

	textarea {
		inline-size: 100%;
		field-sizing: content;
		min-block-size: calc(var(--gutter) * 4);
	}

	:where(button, input, select, option, textarea) {
		color: var(--color-text);
		line-height: var(--line-height-sm);
	}

	:where(
		input:not(
			[type="range"],
			[type="button"],
			[type="submit"],
			[type="radio"],
			[type="checkbox"],
			[type="file"]
		),
		select,
		textarea
	) {
		inline-size: 100%;
		background-color: var(--color-bg-2);
		border: var(--border-width-md) solid var(--color-border);
		border-radius: var(--border-radius-sm);
		padding: calc(var(--gutter) * 0.75);
		font-weight: var(--font-weight);
		transition: border-color 0.1s ease;

		&::placeholder {
			color: var(--color-text);
			opacity: 0.5;
		}

		&:focus,
		&:focus-within {
			border-color: var(--color-accent);
			outline: none;
		}
	}

	select {
		font-weight: normal;
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A");
		background-repeat: no-repeat;
		background-position: right calc(var(--gutter) * 0.75) center;
		background-size: var(--gutter) var(--gutter);

		@supports (appearance: base-select) {
			appearance: base-select;
			display: inline-flex;
			align-items: center;
			justify-content: space-between;
			background-image: none;

			&::picker-icon {
				content: "";
				display: block;
				inline-size: 1em;
				block-size: 0.75em;
				background-color: var(--color-text);
				clip-path: var(--shape-chevron);
				rotate: 90deg;
			}

			&::picker(select) {
				appearance: base-select;
				max-block-size: 24rem;
				max-inline-size: 24rem;
				position-try-order: normal;
				margin-block: calc(calc(var(--stack) * 2) * -1);
				margin-inline: calc(calc(var(--gutter) / 2) * -1.25);
				background-color: var(--color-bg-2);
				border: var(--border-width-sm) solid var(--color-border);
				border-radius: var(--border-radius-sm);
				padding: calc(var(--gutter) / 2);
				box-shadow: var(--shadow-md);
			}

			& legend {
				padding: calc(var(--gutter) / 2);
				font-size: var(--font-size-xs);
				font-weight: var(--font-weight-medium);
				color: var(--color-text);
				text-transform: uppercase;
				opacity: 0.5;
			}

			& option {
				display: block;
				cursor: pointer;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-weight: var(--font-weight);
				padding: calc(var(--gutter) / 2);
				border-radius: var(--border-radius-sm);

				&::checkmark {
					display: none;
				}

				&[disabled] {
					opacity: 0.5;
					pointer-events: none;
				}

				&:not([disabled]) {
					@media (hover: hover) {
						&:hover {
							background-color: oklch(from var(--color-text) l c h / 10%);
						}
					}

					&:focus {
						background-color: oklch(from var(--color-text) l c h / 10%);
					}

					&:focus-visible {
						outline: none;
					}

					&:checked {
						color: var(--color-bg);
						background-color: var(--color-accent);
					}
				}
			}
		}
	}

	[disabled] {
		opacity: 0.5;
	}

	input[type="checkbox"],
	input[type="radio"] {
		appearance: none;
		display: inline-grid;
		place-content: center;
		inline-size: 1.2em;
		block-size: 1.2em;
		margin: 0;
		padding: 0;
		color: currentcolor;
		background-color: var(--color-bg-2);
		border: var(--border-width-md) solid var(--color-border);

		&:checked::before {
			scale: 1;
			box-shadow: inset 1em 1em var(--color-accent);
		}
	}

	input[type="radio"] {
		border-radius: 50%;
		translate: 0 0.05em;

		&::before {
			content: "";
			inline-size: 0.7em;
			block-size: 0.7em;
			border-radius: 50%;
			scale: 0;
			transition: 100ms transform ease-in-out;
			box-shadow: inset 1em 1em var(--color-text);
		}
	}

	input[type="checkbox"] {
		border-radius: var(--border-radius-sm);

		&::before {
			content: "";
			inline-size: 0.65em;
			block-size: 0.65em;
			clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
			scale: 0;
			box-shadow: inset 1em 1em var(--color-text);
		}
	}
}

@layer overlay {
	/* --------------------------------------------------------------------------
	overlays (dialog, tooltip)
	-------------------------------------------------------------------------- */
	dialog {
		inline-size: min(var(--line-length-lg), 90vw);
		margin-block: calc(var(--stack) / 2);
		margin-inline: auto;
		padding-block: var(--stack);
		padding-inline: var(--gutter);
		overflow: visible;
		background-color: var(--color-bg-2);
		border-radius: var(--border-radius-lg);
		border: var(--border-width-sm) solid
			oklch(from var(--color-border) l c h / 50%);
		box-shadow: var(--shadow-lg);
		transition:
			opacity 0.1s,
			scale 0.1s,
			overlay 0.1s allow-discrete,
			display 0.1s allow-discrete;
		opacity: 0;
		scale: 0.9;
		position: fixed;
		inset-block-start: 50dvh;
		translate: 0 -50%;

		&:focus-visible {
			outline: none;
		}

		&::backdrop {
			transition: all 0.1s ease-in-out;
			backdrop-filter: blur(0.1rem);
		}

		&:popover-open {
			opacity: 1;
			scale: 1;
		}

		&[data-variant="drawer"] {
			margin: 0;
			margin-inline-start: auto;
			inset-block-start: 0;
			block-size: 100dvh;
			max-block-size: 100dvh;
			border-radius: 0;
			border-inline-end: none;
			scale: 1;
			translate: 100% 0;
			opacity: 0;
			transition:
				opacity var(--transition-base),
				translate var(--transition-base),
				overlay var(--transition-base) allow-discrete,
				display var(--transition-base) allow-discrete;

			&:popover-open {
				opacity: 1;
				translate: 0 0;
			}

			@starting-style {
				&:popover-open {
					opacity: 0;
					translate: 100% 0;
				}
			}
		}
	}

	@starting-style {
		dialog:popover-open {
			opacity: 0;
			scale: 0.9;
		}
	}

	[role="tooltip"] {
		position: absolute;
		inset: inherit;
		position-visibility: always;
		position-try-fallbacks:
			flip-block,
			y-start span-x-end,
			y-end span-x-end,
			y-start span-x-start,
			y-end span-x-start;
		position-area: y-start span-all;
		padding-block: calc(var(--stack) / 2);
		padding-inline: calc(var(--gutter) * 0.75);
		margin-block: calc(var(--stack) / 2);
		font-size: var(--font-size-sm);
		background-color: var(--color-bg-2);
		border: var(--border-width-sm) solid
			oklch(from var(--color-border) l c h / 50%);
		border-radius: var(--border-radius-lg);
		box-shadow: var(--shadow-lg);
	}
}