@theme {
	/* Fonts */
	--font-sans: "Google Sans Flex", ui-sans-serif, system-ui, sans-serif;

	/* Colors */
	--color-m3-primary: var(--md-sys-color-primary, #6750a4);
	--color-m3-on-primary: var(--md-sys-color-on-primary, #ffffff);
	--color-m3-primary-container: var(--md-sys-color-primary-container, #eaddff);
	--color-m3-on-primary-container: var(
		--md-sys-color-on-primary-container,
		#21005d
	);
	--color-m3-secondary: var(--md-sys-color-secondary, #625b71);
	--color-m3-on-secondary: var(--md-sys-color-on-secondary, #ffffff);
	--color-m3-secondary-container: var(
		--md-sys-color-secondary-container,
		#e8def8
	);
	--color-m3-on-secondary-container: var(
		--md-sys-color-on-secondary-container,
		#1d192b
	);
	--color-m3-tertiary: var(--md-sys-color-tertiary, #7d5260);
	--color-m3-on-tertiary: var(--md-sys-color-on-tertiary, #ffffff);
	--color-m3-tertiary-container: var(
		--md-sys-color-tertiary-container,
		#ffd8e4
	);
	--color-m3-on-tertiary-container: var(
		--md-sys-color-on-tertiary-container,
		#31111d
	);
	--color-m3-error: var(--md-sys-color-error, #b3261e);
	--color-m3-on-error: var(--md-sys-color-on-error, #ffffff);
	--color-m3-error-container: var(--md-sys-color-error-container, #f9dedc);
	--color-m3-on-error-container: var(
		--md-sys-color-on-error-container,
		#410e0b
	);
	--color-m3-surface: var(--md-sys-color-surface, #fef7ff);
	--color-m3-surface-dim: var(--md-sys-color-surface-dim, #d0bcff);
	--color-m3-surface-bright: var(--md-sys-color-surface-bright, #fef7ff);
	--color-m3-on-surface: var(--md-sys-color-on-surface, #1c1b1f);
	--color-m3-surface-variant: var(--md-sys-color-surface-variant, #e7e0eb);
	--color-m3-on-surface-variant: var(
		--md-sys-color-on-surface-variant,
		#49454f
	);
	--color-m3-surface-container-lowest: var(
		--md-sys-color-surface-container-lowest,
		#ffffff
	);
	--color-m3-surface-container-low: var(
		--md-sys-color-surface-container-low,
		#f7f2fa
	);
	--color-m3-surface-container: var(--md-sys-color-surface-container, #f3edf7);
	--color-m3-surface-container-high: var(
		--md-sys-color-surface-container-high,
		#ece6f0
	);
	--color-m3-surface-container-highest: var(
		--md-sys-color-surface-container-highest,
		#e6e0e9
	);
	--color-m3-outline: var(--md-sys-color-outline, #79747e);
	--color-m3-outline-variant: var(--md-sys-color-outline-variant, #cac4d0);

	--color-m3-inverse-surface: var(--md-sys-color-inverse-surface, #313033);
	--color-m3-inverse-on-surface: var(
		--md-sys-color-inverse-on-surface,
		#f4f0ef
	);
	--color-m3-inverse-primary: var(--md-sys-color-inverse-primary, #d0bcff);

	--color-m3-background: var(--md-sys-color-background, #fef7ff);
	--color-m3-on-background: var(--md-sys-color-on-background, #1c1b1f);
	--color-m3-surface-tint: var(--md-sys-color-surface-tint, #6750a4);

	--color-m3-indicator-active: var(--md-sys-color-indicator-active);
	--color-m3-indicator-container: var(--md-sys-color-indicator-container);
	--color-m3-indicator-contained-active: var(
		--md-sys-color-indicator-contained-active
	);
	--color-m3-indicator-contained-container: var(
		--md-sys-color-indicator-contained-container
	);
	--color-m3-indicator-track: var(--md-sys-color-indicator-track);
	--color-m3-indicator-stop: var(--md-sys-color-indicator-stop);

	--color-m3-primary-fixed: var(--md-sys-color-primary-fixed, #eaddff);
	--color-m3-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim, #d0bcff);
	--color-m3-on-primary-fixed: var(--md-sys-color-on-primary-fixed, #21005d);
	--color-m3-on-primary-fixed-variant: var(
		--md-sys-color-on-primary-fixed-variant,
		#4f378b
	);

	--color-m3-secondary-fixed: var(--md-sys-color-secondary-fixed, #e8def8);
	--color-m3-secondary-fixed-dim: var(
		--md-sys-color-secondary-fixed-dim,
		#ccc2dc
	);
	--color-m3-on-secondary-fixed: var(
		--md-sys-color-on-secondary-fixed,
		#1d192b
	);
	--color-m3-on-secondary-fixed-variant: var(
		--md-sys-color-on-secondary-fixed-variant,
		#4a4458
	);

	--color-m3-tertiary-fixed: var(--md-sys-color-tertiary-fixed, #ffd8e4);
	--color-m3-tertiary-fixed-dim: var(
		--md-sys-color-tertiary-fixed-dim,
		#efb8c8
	);
	--color-m3-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed, #31111d);
	--color-m3-on-tertiary-fixed-variant: var(
		--md-sys-color-on-tertiary-fixed-variant,
		#633b48
	);

	--color-m3-scrim: var(--md-sys-color-scrim, #000000);
	--color-m3-shadow: var(--md-sys-color-shadow, #000000);

	/* Bottom Sheet component tokens */
	--m3-bottom-sheet-max-width: var(--md-comp-bottom-sheet-max-width, 640px);
	--m3-bottom-sheet-peek-height: var(--md-comp-bottom-sheet-peek-height, 56px);
	--m3-bottom-sheet-top-margin: var(--md-comp-bottom-sheet-top-margin, 72px);

	/* Border Radius */
	--radius-m3-none: var(--md-sys-shape-corner-none, 0px);
	--radius-m3-xs: var(--md-sys-shape-corner-extra-small, 4px);
	--radius-m3-sm: var(--md-sys-shape-corner-small, 8px);
	--radius-m3-md: var(--md-sys-shape-corner-medium, 12px);
	--radius-m3-lg: var(--md-sys-shape-corner-large, 16px);
	--radius-m3-lg-inc: var(--md-sys-shape-corner-large-increased, 20px);
	--radius-m3-xl: var(--md-sys-shape-corner-extra-large, 28px);
	--radius-m3-xl-inc: var(--md-sys-shape-corner-extra-large-increased, 32px);
	--radius-m3-xxl: var(--md-sys-shape-corner-extra-extra-large, 48px);
	--radius-m3-full: var(--md-sys-shape-corner-full, 9999px);

	/* Motion Timing Easing */
	--ease-m3-emphasized: cubic-bezier(0.2, 0, 0, 1);
	--ease-m3-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
	--ease-m3-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
	--ease-m3-standard: cubic-bezier(0.2, 0, 0, 1);
	--ease-m3-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
	--ease-m3-standard-decelerate: cubic-bezier(0, 0, 0, 1);
	--ease-m3-linear: cubic-bezier(0, 0, 1, 1);

	/* Motion Spring Curves */
	--md-sys-motion-spring-exp-fast-spatial-curve: cubic-bezier(
		0.42,
		1.67,
		0.21,
		0.9
	);
	--md-sys-motion-spring-exp-fast-spatial-duration: 350ms;
	--md-sys-motion-spring-exp-default-spatial-curve: cubic-bezier(
		0.38,
		1.21,
		0.22,
		1
	);
	--md-sys-motion-spring-exp-default-spatial-duration: 500ms;
	--md-sys-motion-spring-exp-slow-spatial-curve: cubic-bezier(
		0.39,
		1.29,
		0.35,
		0.98
	);
	--md-sys-motion-spring-exp-slow-spatial-duration: 650ms;
	--md-sys-motion-spring-exp-fast-effects-curve: cubic-bezier(
		0.31,
		0.94,
		0.34,
		1
	);
	--md-sys-motion-spring-exp-fast-effects-duration: 150ms;
	--md-sys-motion-spring-exp-default-effects-curve: cubic-bezier(
		0.34,
		0.8,
		0.34,
		1
	);
	--md-sys-motion-spring-exp-default-effects-duration: 200ms;
	--md-sys-motion-spring-exp-slow-effects-curve: cubic-bezier(
		0.34,
		0.88,
		0.34,
		1
	);
	--md-sys-motion-spring-exp-slow-effects-duration: 300ms;

	--md-sys-motion-spring-std-fast-spatial-curve: cubic-bezier(
		0.27,
		1.06,
		0.18,
		1
	);
	--md-sys-motion-spring-std-fast-spatial-duration: 350ms;
	--md-sys-motion-spring-std-default-spatial-curve: cubic-bezier(
		0.27,
		1.06,
		0.18,
		1
	);
	--md-sys-motion-spring-std-default-spatial-duration: 500ms;
	--md-sys-motion-spring-std-slow-spatial-curve: cubic-bezier(
		0.27,
		1.06,
		0.18,
		1
	);
	--md-sys-motion-spring-std-slow-spatial-duration: 750ms;
	--md-sys-motion-spring-std-fast-effects-curve: cubic-bezier(
		0.31,
		0.94,
		0.34,
		1
	);
	--md-sys-motion-spring-std-fast-effects-duration: 150ms;
	--md-sys-motion-spring-std-default-effects-curve: cubic-bezier(
		0.34,
		0.8,
		0.34,
		1
	);
	--md-sys-motion-spring-std-default-effects-duration: 200ms;
	--md-sys-motion-spring-std-slow-effects-curve: cubic-bezier(
		0.34,
		0.88,
		0.34,
		1
	);
	--md-sys-motion-spring-std-slow-effects-duration: 300ms;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* Browser UI Resets                                                           */
/* Reset native browser UI elements like clear/cancel and password toggle buttons */
/* ─────────────────────────────────────────────────────────────────────────── */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	-webkit-appearance: none;
}

input::-ms-clear,
input::-ms-reveal {
	display: none;
	width: 0;
	height: 0;
}

body {
	background-color: var(--md-sys-color-surface, #fef7ff);
	color: var(--md-sys-color-on-surface, #1c1b1f);
	-webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* Material Symbols Icon base class                                            */
/* ─────────────────────────────────────────────────────────────────────────── */
.md-icon {
	font-family: var(--md-icon-font, "Material Symbols Rounded");
	font-weight: normal;
	font-style: normal;
	font-size: var(--md-icon-size, 24px);
	line-height: 1;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	font-variation-settings:
		"FILL" var(--md-icon-fill, 0),
		"wght" var(--md-icon-weight, 400),
		"GRAD" var(--md-icon-grade, 0),
		"opsz" var(--md-icon-opsz, 24);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* MD3 Elevation utilities                                                     */
/* ─────────────────────────────────────────────────────────────────────────── */
@utility elevation-0 {
	box-shadow: none;
}

@utility elevation-1 {
	box-shadow:
		0px 1px 2px 0px rgba(0, 0, 0, 0.3),
		0px 1px 3px 1px rgba(0, 0, 0, 0.15);
}

@utility elevation-2 {
	box-shadow:
		0px 1px 2px 0px rgba(0, 0, 0, 0.3),
		0px 2px 6px 2px rgba(0, 0, 0, 0.15);
}

@utility elevation-3 {
	box-shadow:
		0px 1px 3px 0px rgba(0, 0, 0, 0.3),
		0px 4px 8px 3px rgba(0, 0, 0, 0.15);
}

@utility elevation-4 {
	box-shadow:
		0px 2px 3px 0px rgba(0, 0, 0, 0.3),
		0px 6px 10px 4px rgba(0, 0, 0, 0.15);
}

@utility elevation-5 {
	box-shadow:
		0px 4px 4px 0px rgba(0, 0, 0, 0.3),
		0px 8px 12px 6px rgba(0, 0, 0, 0.15);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* Icon variant utilities                                                      */
/* ─────────────────────────────────────────────────────────────────────────── */
@utility icon-outlined {
	--md-icon-font: "Material Symbols Outlined";
	font-family: "Material Symbols Outlined", sans-serif;
}

@utility icon-rounded {
	--md-icon-font: "Material Symbols Rounded";
	font-family: "Material Symbols Rounded", sans-serif;
}

@utility icon-sharp {
	--md-icon-font: "Material Symbols Sharp";
	font-family: "Material Symbols Sharp", sans-serif;
}

@utility icon-fill-0 {
	--md-icon-fill: 0;
}

@utility icon-fill-1 {
	--md-icon-fill: 1;
}

@utility icon-weight-100 {
	--md-icon-weight: 100;
}

@utility icon-weight-200 {
	--md-icon-weight: 200;
}

@utility icon-weight-300 {
	--md-icon-weight: 300;
}

@utility icon-weight-400 {
	--md-icon-weight: 400;
}

@utility icon-weight-500 {
	--md-icon-weight: 500;
}

@utility icon-weight-600 {
	--md-icon-weight: 600;
}

@utility icon-weight-700 {
	--md-icon-weight: 700;
}

@utility icon-grade-low {
	--md-icon-grade: -25;
}

@utility icon-grade-default {
	--md-icon-grade: 0;
}

@utility icon-grade-high {
	--md-icon-grade: 200;
}

@utility icon-size-20 {
	--md-icon-size: 20px;
	--md-icon-opsz: 20;
	font-size: 20px;
}

@utility icon-size-24 {
	--md-icon-size: 24px;
	--md-icon-opsz: 24;
	font-size: 24px;
}

@utility icon-size-40 {
	--md-icon-size: 40px;
	--md-icon-opsz: 40;
	font-size: 40px;
}

@utility icon-size-48 {
	--md-icon-size: 48px;
	--md-icon-opsz: 48;
	font-size: 48px;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* MD3 Expressive transition utility classes                                   */
/* ─────────────────────────────────────────────────────────────────────────── */
@utility transition-m3-fast-spatial {
	transition-timing-function: var(
		--md-sys-motion-spring-exp-fast-spatial-curve
	);
	transition-duration: var(--md-sys-motion-spring-exp-fast-spatial-duration);
}

@utility transition-m3-default-spatial {
	transition-timing-function: var(
		--md-sys-motion-spring-exp-default-spatial-curve
	);
	transition-duration: var(--md-sys-motion-spring-exp-default-spatial-duration);
}

@utility transition-m3-slow-spatial {
	transition-timing-function: var(
		--md-sys-motion-spring-exp-slow-spatial-curve
	);
	transition-duration: var(--md-sys-motion-spring-exp-slow-spatial-duration);
}

@utility transition-m3-fast-effects {
	transition-timing-function: var(
		--md-sys-motion-spring-exp-fast-effects-curve
	);
	transition-duration: var(--md-sys-motion-spring-exp-fast-effects-duration);
}

@utility transition-m3-default-effects {
	transition-timing-function: var(
		--md-sys-motion-spring-exp-default-effects-curve
	);
	transition-duration: var(--md-sys-motion-spring-exp-default-effects-duration);
}

@utility transition-m3-slow-effects {
	transition-timing-function: var(
		--md-sys-motion-spring-exp-slow-effects-curve
	);
	transition-duration: var(--md-sys-motion-spring-exp-slow-effects-duration);
}

@utility transition-m3-std-fast-spatial {
	transition-timing-function: var(
		--md-sys-motion-spring-std-fast-spatial-curve
	);
	transition-duration: var(--md-sys-motion-spring-std-fast-spatial-duration);
}

@utility transition-m3-std-default-spatial {
	transition-timing-function: var(
		--md-sys-motion-spring-std-default-spatial-curve
	);
	transition-duration: var(--md-sys-motion-spring-std-default-spatial-duration);
}

@utility transition-m3-std-slow-spatial {
	transition-timing-function: var(
		--md-sys-motion-spring-std-slow-spatial-curve
	);
	transition-duration: var(--md-sys-motion-spring-std-slow-spatial-duration);
}

@utility bg-mesh-gradient {
	background-color: #f7e0fc;
	background-image:
		radial-gradient(at 0% 0%, hsla(300, 100%, 85%, 0.6) 0px, transparent 50%),
		radial-gradient(at 100% 0%, hsla(280, 100%, 85%, 0.6) 0px, transparent 50%),
		radial-gradient(
			at 100% 100%,
			hsla(340, 100%, 85%, 0.6) 0px,
			transparent 50%
		),
		radial-gradient(at 0% 100%, hsla(250, 100%, 85%, 0.6) 0px, transparent 50%),
		radial-gradient(at 50% 50%, hsla(0, 100%, 90%, 0.4) 0px, transparent 60%);
}