:root {
	/* Fickle Bucks theme colours */
	--pink-10: #620042;
	--pink-20: #870557;
	--pink-30: #A30664;
	--pink-40: #BC0A6F;
	--pink-50: #DA127D; /* brand*/
	--pink-60: #E8368F;
	--pink-70: #F364A2;
	--pink-80: #FF8CBA;
	--pink-90: #FFB8D2;
	--pink-95: #FFE3EC;

	/***
	 * How colour names work
	 *
	 * --wa-color-{group}-{role}-{attention} 
	 * 
	 * Fill for background colors or areas larger than a few pixels
	 * Border for borders, dividers, and other stroke-width elements
	 * On for content displayed on a fill (e.g., pair --wa-color-danger-on-loud with --wa-color-danger-fill-loud)
	 * 
	 * Quiet draws the least attention
	 * Normal draws some attention
	 * Loud draws the most attention
	 */
	--wa-color-brand-fill-quiet: var(--pink-90);
	--wa-color-brand-fill-normal: var(--pink-80);
	--wa-color-brand-fill-loud: var(--pink-50);
	--wa-color-brand-border-quiet: var(--pink-90);
	--wa-color-brand-border-normal: var(--pink-80);
	--wa-color-brand-border-loud: var(--pink-60);
	--wa-color-brand-on-quiet: var(--pink-40);
	--wa-color-brand-on-normal: var(--pink-30);

	--wa-color-neutral: var(--wa-color-gray-95);

	--wa-color-focus: var(--pink-80);

	--color-brand: var(--pink-50);
	--color-error: var(--wa-color-danger-50);
	--color-delete: var(--wa-color-danger-30);
	/* --color-background: var(--wa-color-gray-95); */
	/* --color-background: #f6f5f4; */ /* Gnome light gray */
	--color-bg: #F1EFE9; /* Sepia */
	--color-bg-dark: #e3dfd3;


	/* --wa-color-fill-loud: #f6f5f4;
	--wa-color-neutral-fill-loud: #f6f5f4; */

	/***
	 * Other customisations
	 */
	--wa-content-spacing: var(--wa-space-m);

}

/* Desktop: switch to 14px base while preserving accessibility */
@media (min-width: 768px) {
  html {
	---------------font-size: 87.5%; /* 87.5% of 16px = 14px */
  }
}

img {
	border-radius: 0px;
}

/* #region Buttons ~~~~~~~~~~~~~~~~~~~~~~~~~ */
.button {
	/* Create the base for anchor buttons looking like real ones */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	user-select: none;
	white-space: nowrap;
	vertical-align: middle;
	transition-property: background, border, box-shadow, color;
	transition-duration: var(--wa-transition-fast);
	transition-timing-function: var(--wa-transition-easing);
	cursor: pointer;
	padding: 0 var(--wa-form-control-padding-inline);
	font-family: inherit;
	font-size: inherit;
	font-weight: var(--wa-font-weight-action);
	line-height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
	height: var(--wa-form-control-height);
	/* width: 100%; */
	/* background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)); */
	/* border-color: transparent; */
	/* color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud)); */
	/* border-radius: var(--wa-form-control-border-radius); */
	border-style: var(--wa-border-style);
	border-width: var(--wa-border-width-s);
}

button,
.button,
input[type='button'],
input[type='reset'],
input[type='submit'],
input[type='file'] {

	/* Default styles for standard buttons */
	:where(&:not(input[type='file'])) {
		color: var(--wa-color-text);
		border-color: #bfb8b1;
		background-color: initial;
		background-image: linear-gradient(to bottom, #f6f5f4, #edebe9);

		&:not(:disabled) {
			&:hover {
				background-color: initial;
				background-image: linear-gradient(to bottom, 
					color-mix(in oklab, #f6f5f4, var(--wa-color-mix-hover) ),
					color-mix(in oklab, #edebe9, var(--wa-color-mix-hover) )
				);
			}

			&:active {
				background-color: initial;
				background-image: linear-gradient(to bottom, 
					color-mix(in oklab, #f6f5f4, var(--wa-color-mix-active) ),
					color-mix(in oklab, #edebe9, var(--wa-color-mix-active) )
				);
			}
		}
	}

	/* Default styles for file selector buttons */
	:where(&:is(input[type='file'])) {
	&::file-selector-button {
		color: var(--wa-color-text);
		border-color: #bfb8b1;
		background-color: initial;
		background-image: linear-gradient(to bottom, #f6f5f4, #edebe9);

		&:hover {
			background-image: linear-gradient(to bottom, 
				color-mix(in oklab, #f6f5f4, var(--wa-color-mix-hover) ),
				color-mix(in oklab, #edebe9, var(--wa-color-mix-hover) )
			);
		}

		&:active {
			background-image: linear-gradient(to bottom, 
				color-mix(in oklab, #f6f5f4, var(--wa-color-mix-active) ),
				color-mix(in oklab, #edebe9, var(--wa-color-mix-active) )
			);
		}
	}

	&:not(:disabled) {
		&::file-selector-button:hover {
		background-color: color-mix(
			in oklab,
			var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
			var(--wa-color-mix-hover)
		);
		}

		&::file-selector-button:active {
		background-color: color-mix(
			in oklab,
			var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
			var(--wa-color-mix-active)
		);
		}
	}
	}

	/* Modifier classes */
	&.primary {
		/* My primary skeumorphic button class */
		&:not(input[type='file']),
		&::file-selector-button {
			color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
			border-color: var(--pink-40);
			background-color: initial;
			background-image: linear-gradient(to bottom, #E0459B, #C4116F);
		}

		&:not(:disabled) {
			&:not(input[type='file']):hover,
			&::file-selector-button:hover {
				background-color: initial;
				background-image: linear-gradient(to bottom, 
					color-mix(in oklab, #E0459B, var(--wa-color-mix-hover) ),
					color-mix(in oklab, #C4116F, var(--wa-color-mix-hover) )
				);
			}

			&:not(input[type='file']):active,
			&::file-selector-button:active {
			background-color: initial;
				background-image: linear-gradient(to bottom, 
					color-mix(in oklab, #E0459B, var(--wa-color-mix-active) ),
					color-mix(in oklab, #C4116F, var(--wa-color-mix-active) )
				);
			}
		}
	}

	&.wa-accent {
	&:not(input[type='file']),
	&::file-selector-button {
		color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
		background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
		border-color: transparent;
	}

	&:not(:disabled) {
		&:not(input[type='file']):hover,
		&::file-selector-button:hover {
		background-color: color-mix(
			in oklab,
			var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
			var(--wa-color-mix-hover)
		);
		}

		&:not(input[type='file']):active,
		&::file-selector-button:active {
		background-color: color-mix(
			in oklab,
			var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
			var(--wa-color-mix-active)
		);
		}
	}
	}
}
/* #endregion */

.button:has(> wa-icon:only-child),
button:has(> wa-icon:only-child) {
	width: var(--wa-form-control-height);
	/* aspect-ratio: 1 / 1; */
}

label {
	& + :is(input:not([type='checkbox'], [type='radio']), textarea, select), & > :is(input:not([type='checkbox'], [type='radio']), textarea, select) {
		margin-block-start: 0.2em;
	}
}

wa-button:not([variant]):not([appearance]) {
	/* === Default (standard) button === */
	&::part(base) {
		color: var(--wa-color-text);
		border-color: #bfb8b1;
		background-color: initial;
		background-image: linear-gradient(to bottom, #f6f5f4, #edebe9);
	}

	&:hover:not(:disabled)::part(base) {
		background-color: initial;
		background-image: linear-gradient(
			to bottom,
			color-mix(in oklab, #f6f5f4, var(--wa-color-mix-hover)),
			color-mix(in oklab, #edebe9, var(--wa-color-mix-hover))
		);
	}

	&:active:not(:disabled)::part(base) {
		background-color: initial;
		background-image: linear-gradient(
			to bottom,
			color-mix(in oklab, #f6f5f4, var(--wa-color-mix-active)),
			color-mix(in oklab, #edebe9, var(--wa-color-mix-active))
		);
	}

	/* === File selector variant === */
	&[type='file'] {
		&::part(base)::file-selector-button {
			color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
			background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
			border-color: transparent;
		}

		&:hover:not(:disabled)::part(base)::file-selector-button {
			background-color: color-mix(
				in oklab,
				var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
				var(--wa-color-mix-hover)
			);
		}

		&:active:not(:disabled)::part(base)::file-selector-button {
			background-color: color-mix(
				in oklab,
				var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
				var(--wa-color-mix-active)
			);
		}
	}

	/* === Modifier: .primary (skeuomorphic) === */
	&.primary {
		&::part(base) {
			color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
			border-color: var(--pink-40);
			background-color: initial;
			background-image: linear-gradient(to bottom, #E0459B, #C4116F);
		}

		&:hover:not(:disabled)::part(base) {
			background-color: initial;
			background-image: linear-gradient(
				to bottom,
				color-mix(in oklab, #E0459B, var(--wa-color-mix-hover)),
				color-mix(in oklab, #C4116F, var(--wa-color-mix-hover))
			);
		}

		&:active:not(:disabled)::part(base) {
			background-color: initial;
			background-image: linear-gradient(
				to bottom,
				color-mix(in oklab, #E0459B, var(--wa-color-mix-active)),
				color-mix(in oklab, #C4116F, var(--wa-color-mix-active))
			);
		}
	}
}

/* Apply pill radius globally - including [variant] and [appearance] buttons */
wa-button,
wa-dropdown,
button,
.button,
input:where([type='button'], [type='reset'], [type='submit'], [type='file']) {
	--wa-form-control-border-radius: var(--wa-border-radius-pill);
	border-radius: var(--wa-border-radius-pill);
}

/* Smaller buttons by default - including [variant] and [appearance] buttons */
wa-button,
button,
.button,
input:where([type='button'], [type='reset'], [type='submit'], [type='file']) {
	font-size: var(--wa-font-size-s);
}

/* Hide the asterisk that Web Awesome automatically adds to [required] fields. */
*::part(form-control-label)::after {
	content: "";
}

/* Callouts */
wa-callout wa-icon[slot="icon"] {
	margin-left: -1.85rem; /* -28px */
}

wa-callout[variant="info"] {
	background-color: #e8f3ff; /* oklch(95.944% 0.01996 250.38) */;
	border-color: #d1e8ff; /* oklch(92.121% 0.03985 248.26) */
}
wa-callout[variant="info"] wa-icon[slot="icon"] {
	color: rgb(0, 83, 192);
}

wa-callout .action-row {
	margin-top: var(--wa-space-s);
}
@media screen and (max-width: 550px) {
	wa-callout .action-row {
		display: flex;
		flex-direction: column;
		gap: var(--wa-space-s);
	}
}