@layer fonts {
	:root {
		--font-family-head: "YoungSerif", serif;
		--font-family-base: "OfficeCodePro", sans-serif;

		--font-weight-head-medium: 400;
		--font-weight-head-bold: 600;
		--font-weight-base-medium: 400;
		--font-weight-base-bold: 500;

		--radius-m: 8px;
		--radius-l: 14px;

		--shadow-card: 0 0 1px oklch(from var(--color-background-contrast) l c h / 0.12),
	  0px 0px 5px -3px oklch(from var(--color-background-contrast) l c h / 0.4),
	  2px 2px 4px -3px oklch(from var(--color-background-contrast) l c h / 0.4)
		;

		--shadow-button: 0 0 1px var(--color-background-contrast),
	 -2px -2px 5px -3px oklch(from var(--color-background-contrast) l c h / 0.4),
	  2px 2px 4px -3px oklch(from var(--color-background-contrast) l c h / 0.4)
		;

		--backdrop-darkening: rgba(0, 0, 0, 0.6);
		--color-brand: oklch(0.62 0.21 42.51);
		--color-danger: var(--color-brand);
		--color-focus: oklch(0.5 0.2 23);
		--color-link:  oklch(0.66 0.14 250);
		--color-base-normal: oklch(0.1 0 0);
		--color-background-lvl-5: oklch(0.96 0 0);
		--color-background-lvl-10: oklch(0.98 0 0);
		--color-background-lvl-15: oklch(1 0 0);
		--color-contrast: oklch(1 0 0);
		--color-background-contrast: oklch(0 0 0);
		--color-background-contrast-muted: oklch(0.8 0 0);

		/* Preview backgrounds for logo picker (fixed values, don't change with theme) */
		--color-preview-bright-bg: oklch(0.96 0 0);
		--color-preview-dark-bg: oklch(0.2 0 0);
		--color-preview-dark-text: oklch(0.87 0 0);
	}

	@media screen and (prefers-color-scheme: dark) {
		:root {
			--glass-whitening: rgba(0, 0, 0, 0.2);
			--color-brand: oklch(0.55 0.17 43.92);
			--color-background-lvl-5: oklch(0.25 0 0);
			--color-background-lvl-10: oklch(0.2 0 0);
			--color-background-lvl-15: oklch(0.35 0 0);
			--color-contrast: oklch(0 0 0);
			--color-background-contrast: oklch(1 0 0);
			--color-base-normal: oklch(0.87 0 0);
		}
	}

	html, body {
		font-family: var(--font-family-base);
		background: var(--color-background-lvl-5);
		color: var(--color-base-normal);
		font-weight: var(--font-weight-base-medium);
		font-size: 100%;
		line-height: 1.6rem;
	}

	a {
		color: var(--color-link);

		&:visited {
			color: var(--color-link);
		}
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: var(--font-family-head);
		font-weight: var(--font-weight-head-bold);
		margin: 1.6rem 0 1rem;
	}

	h1 {
		font-size: 1.8rem;
	}

	h2 {
		font-size: 1.6rem;
	}

	h3 {
		font-size: 1.4rem;
	}

	h4 {
		font-size: 1.2rem;
	}

	h5, h6 {
		font-size: 1rem;
	}

	h6 {
		font-weight: var(--font-weight-head-medium);
		font-style: italic;
	}
}

@layer {
	.logo {
		& > a,
		& > a:visited {
			color: inherit;
			text-decoration: none;
		}

		& span {
			color: var(--color-brand);
		}
	}

	.bubble {
		background: var(--color-background-lvl-15);
		padding: 0.8rem 1.25rem;
		border-radius: var(--radius-l);
		&:is(a) {
			&:hover,
			&:active,
		  &:focus {
					box-shadow:
					0 0 1px var(--color-background-contrast),
				 -2px -2px 7px -2px oklch(from var(--color-background-contrast) l c h / 0.4),
				  2px 2px 6px -2px oklch(from var(--color-background-contrast) l c h / 0.4)
					;
			}
		}

		& > h1,
		& > h2 {
			margin-top: 0;
		}
	}


	.card,
	.media-item,
	dialog:open {
		background: var(--color-background-lvl-15);
		padding: 1rem;
		border-radius: var(--radius-m);
		box-shadow: var(--shadow-card);
		border: none;
	}

	form {
		display: grid;
		justify-items: start;
		gap: 1rem;

		*:has(> label) {
			container-type: inline-size;
			display: grid;
			gap: 0.5rem;
		}

		& label {
			display: grid;
			font-weight: var(--font-weight-base-bold);
			width: 100%;
			column-gap: 1rem;
			row-gap: 0;
			grid-template-columns: 1fr;
			border-bottom: 1px solid var(--color-background-contrast);
			align-items: center;
			white-space: nowrap;

			@container (width >=400px) {
				grid-template-columns: min-content 1fr;
				height: 1.5lh;
			}

			&:has(textarea),
		  &:has([role="textbox"]){
				height: auto;
				grid-template-columns: 1fr;

				& textarea {
					width: 100%;
					min-height: 400px;
				}
			}

			& > span {
				white-space: nowrap;
			}

			& input {
				background: transparent;
				outline: none;
				color: var(--color-base-normal);
				font-weight: var(--font-weight-base-bold);
				--local-border: 1px solid var(--color-background-contrast);
				border: none;
		    padding: 0 0.5rem;
		    align-self: stretch;

				&:active,
				&:focus {
					border-left: var(--local-border);
					border-right: var(--local-border);
					border-top: var(--local-border);
				}
			}
		}

		& .form__actions {
			display: flex;
	    justify-content: end;
	    width: 100%;
		}
	}

	.button {
		display: inline-flex;
		align-items: center;
		width: auto;
		justify-content: center;
		background: var(--color-background-contrast);
		color: var(--color-contrast);
		border: none;
		outline: none;
		border-radius: var(--radius-m);
		font-family: var(--font-family-base);
		font-weight: var(--font-weight-base-medium);
		font-size: 1.2rem;
		line-height: 1;
		padding: 0.75rem 1.5rem;
		cursor: pointer;
		text-decoration: none;
		white-space: nowrap;


		&:hover,
		&:active,
	  &:focus {
			outline: 3px solid var(--color-link);
		}

		&.button--secondary {
			background: var(--color-background-lvl-5);
			box-shadow: 0 0 0 2px var(--color-background-contrast);
			color: var(--color-base-normal);
		}

		&.button--tertiary {
			background: var(--color-background-lvl-5);
			box-shadow: none;
			color: var(--color-base-normal);
		}

		&.button--danger {
			background: var(--color-background-lvl-5);
			box-shadow: 0 0 0 2px var(--color-background-contrast-muted);
			color: var(--color-base-normal);
			font-size: 1rem;
			padding: 0.5rem 1rem;
			&:hover,
			&:active,
		  &:focus {
				outline: 3px solid var(--color-brand);
			}
		}
	}

	hr {
		border: none;
		outline: none;
		width: 100%;
		display: flex;
		margin: 1rem 0;
		justify-content: center;
		height: 1px;
		&:after {
			content: '';
			width: min(300px, 80%);
			height: 1px;
			background: var(--color-background-contrast-muted);
		}
	}
	hr.hr--invisible {
		&:after {
			content: none;
		}
	}

	.error {
		color: var(--color-danger);
	}

	dialog:open {
		padding: 1rem;
		display: grid;
		gap: 1rem;
		& p {
			margin: 0;
		}

		& li {
			display: list-item;
		}

		&::backdrop {
			background: var(--backdrop-darkening);
		}
	}

	.js-dropdown {
		select {
	  	padding: 0.5rem
		}
	}

	/* Media Picker Dialog - shared between composer and logo picker */
	.media-picker-dialog {
		max-width: 80vw;
		width: 80%;
		max-height: 80vh;
		padding: 0;
		border: none;
		border-radius: var(--radius-m);
		background: var(--color-background-lvl-15);

		&::backdrop {
			background: var(--backdrop-darkening);
		}

		& .media-picker-dialog__header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 1rem;
			border-bottom: 1px solid var(--color-background-contrast);

			& h3 {
				margin: 0;
			}
		}

		& .media-picker-dialog__grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(150px, 200px));
			gap: 1rem;
			padding: 1rem;
			overflow-y: auto;
			max-height: calc(80vh - 80px);
		}

		& .media-picker-dialog__item {
			display: grid;
			justify-items: center;
			align-items: center;
			gap: 0.5rem;
		}

		& .media-picker-dialog__thumbnail {
			width: 100%;
			height: 150px;
			object-fit: cover;
			border-radius: var(--radius-m);
		}

		& .media-picker-dialog__empty {
			grid-column: 1 / -1;
			text-align: center;
			padding: 2rem;
		}
	}

	/* Logo Picker - website settings */
	.logo-picker {
		display: grid;
		gap: 2rem;
		margin-bottom: 2rem;

		& .logo-picker__variants {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
			gap: 1.5rem;
		}

		& .logo-picker__variant {
			display: grid;
			gap: 1rem;
			padding: 1rem;
			background: var(--color-background-lvl-15);
			border-radius: var(--radius-m);
			box-shadow: var(--shadow-card);

			& h4 {
				margin: 0;
			}

			& p {
				margin: 0;
				font-size: 0.9rem;
				color: var(--color-base-normal);
				opacity: 0.8;
			}
		}

		/* Square logo: container with two versions (bright + dark) */
		& .logo-picker__preview-square {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 0.5rem;

			& .logo-picker__preview {
				aspect-ratio: 1 / 1;
				padding: 2rem;
			}
		}

		/* Rectangle logo: single preview */
		& .logo-picker__preview--rect {
			height: 200px;
			width: auto;
			max-width: 100%;

			& img {
				width: auto;
				height: 100%;
				object-fit: contain;
			}
		}

		& .logo-picker__preview {
			display: flex;
			padding: 2rem;
			align-items: center;
			justify-content: center;
			border-radius: var(--radius-m);

			& img {
				max-width: 100%;
				max-height: 100%;
				object-fit: contain;
			}
		}

		/* Bright background (default light mode bg) */
		& .logo-picker__preview--bright {
			background: var(--color-preview-bright-bg);
		}

		/* Dark background (default dark mode bg) */
		& .logo-picker__preview--dark {
			background: var(--color-preview-dark-bg);

			& .logo-picker__placeholder {
				color: var(--color-preview-dark-text);
			}
		}

		& .logo-picker__placeholder {
			color: var(--color-base-normal);
			opacity: 0.5;
			font-style: italic;
		}

		& .logo-picker__buttons {
			display: flex;
			gap: 0.5rem;
			justify-content: center;
		}

		& .logo-picker__actions {
			display: flex;
			justify-content: flex-end;
		}
	}
}