/* Global Variables */
:root {
	/* Accent Colors */
	--fds-accent-light-3: 191, 98%, 80%;
	--fds-accent-light-2: 199, 99%, 69%;
	--fds-accent-light-1: 205, 100%, 49%;
	--fds-accent-base: 206, 100%, 42%;
	--fds-accent-dark-1: 209, 100%, 36%;
	--fds-accent-dark-2: 215, 100%, 29%;
	--fds-accent-dark-3: 226, 100%, 20%;

	/* Font Families */
	--fds-font-family-fallback: "Segoe UI", -apple-system, ui-sans-serif, system-ui,
		BlinkMacSystemFont, Helvetica, Arial, sans-serif;
	--fds-font-family-text: "Segoe UI Variable Text", "Seoge UI Variable Static Text",
		var(--fds-font-family-fallback);
	--fds-font-family-small: "Segoe UI Variable Small", "Seoge UI Variable Static Small",
		var(--fds-font-family-fallback);
	--fds-font-family-display: "Segoe UI Variable Display", "Seoge UI Variable Static Display",
		var(--fds-font-family-fallback);

	/* Font Size */
	--fds-caption-font-size: 12px;
	--fds-body-font-size: 14px;
	--fds-body-large-font-size: 18px;
	--fds-subtitle-font-size: 20px;
	--fds-title-font-size: 28px;
	--fds-title-large-font-size: 40px;
	--fds-display-font-size: 68px;

	/* Roundness */
	--fds-control-corner-radius: 4px;
	--fds-overlay-corner-radius: 8px;

	/* Duration */
	--fds-control-slow-duration: 333ms;
	--fds-control-normal-duration: 250ms;
	--fds-control-fast-duration: 167ms;
	/* --fds-control-fast-after-duration: 168ms; */
	--fds-control-faster-duration: 83ms;

	/* Easing */
	--fds-control-fast-out-slow-in-easing: cubic-bezier(0, 0, 0, 1);

	/* Focus Stroke */
	--fds-focus-stroke: 0 0 0 1px var(--fds-focus-stroke-inner),
		0 0 0 3px var(--fds-focus-stroke-outer);

	/* Acrylic */
	--fds-acrylic-noise-asset: url("data:image/png;base64, ");
	--fds-acrylic-blur-factor: blur(60px);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
	:root {
		--fds-control-slow-duration: 0ms;
		--fds-control-normal-duration: 0ms;
		--fds-control-fast-duration: 0ms;
		/* --fds-control-fast-after-duration: 0ms; */
		--fds-control-faster-duration: 0ms;
	}
}

/* Dark Theme Colors */
@media (prefers-color-scheme: light) {
	:root {
		/* Text */
		--fds-text-primary: hsla(0, 0%, 100%, 100%);
		--fds-text-secondary: hsla(0, 0%, 100%, 78.6%);
		--fds-text-tertiary: hsla(0, 0%, 100%, 54.42%);
		--fds-text-disabled: hsla(0, 0%, 100%, 36.28%);

		/* Accent */
		--fds-accent-default: hsla(var(--fds-accent-light-2));
		--fds-accent-secondary: hsla(var(--fds-accent-light-2), 90%);
		--fds-accent-tertiary: hsla(var(--fds-accent-light-2), 80%);
		--fds-accent-disabled: hsla(0, 0%, 100%, 15.81%);

		/* Accent Text */
		--fds-accent-text-primary: hsl(var(--fds-accent-light-3));
		--fds-accent-text-secondary: hsl(var(--fds-accent-light-3));
		--fds-accent-text-tertiary: hsl(var(--fds-accent-light-2));
		--fds-accent-text-disabled: hsla(0, 0%, 100%, 36.28%);

		/* Text on Accent */
		--fds-text-on-accent-primary: hsl(0, 0%, 0%);
		--fds-text-on-accent-secondary: hsla(0, 0%, 0%, 0.5);
		--fds-text-on-accent-disabled: hsla(0, 0%, 100%, 0.53);
		--fds-text-on-accent-selected: hsl(0, 0%, 100%);

		/* Control Fill */
		--fds-control-fill-transparent: transparent;
		--fds-control-fill-default: hsla(0, 0%, 100%, 0.061);
		--fds-control-fill-secondary: hsla(0, 0%, 100%, 0.084);
		--fds-control-fill-tertiary: hsla(0, 0%, 100%, 0.033);
		--fds-control-fill-disabled: hsla(0, 0%, 100%, 0.042);
		--fds-control-fill-input-active: hsla(0, 0%, 12%, 70%);

		/* Control Strong Fill */
		--fds-control-strong-fill-default: hsla(0, 0%, 100%, 54.42%);
		--fds-control-strong-fill-disabled: hsla(0, 0%, 100%, 24.65%);

		/* Control Solid Fill */
		--fds-control-solid-fill-default: hsl(0, 0%, 27%);

		/* Control Alt Fill */
		--fds-control-alt-fill-transparent: transparent;
		--fds-control-alt-fill-secondary: hsla(0, 0%, 0%, 0.1);
		--fds-control-alt-fill-tertiary: hsla(0, 0%, 100%, 0.042);
		--fds-control-alt-fill-quarternary: hsla(0, 0%, 100%, 0.07);
		--fds-control-alt-fill-disabled: var(--fds-control-fill-transparent);

		/* Control on Image Fill */
		--fds-control-on-image-fill-default: hsla(0, 0%, 11%, 70%);
		--fds-control-on-image-fill-secondary: hsl(0, 0%, 10%);
		--fds-control-on-image-fill-tertiary: hsl(0, 0%, 7%);
		--fds-control-on-image-fill-disabled: transparent;

		/* Subtle Fill */
		--fds-subtle-fill-transparent: transparent;
		--fds-subtle-fill-secondary: hsla(0, 0%, 100%, 6.05%);
		--fds-subtle-fill-tertiary: hsla(0, 0%, 100%, 4.19%);
		--fds-subtle-fill-disabled: transparent;

		/* Control Stroke */
		--fds-control-stroke-default: hsla(0, 0%, 100%, 6.98%);
		--fds-control-stroke-secondary: hsla(0, 0%, 100%, 9.3%);

		/* Control Strong Stroke */
		--fds-control-strong-stroke-default: hsla(0, 0%, 100%, 54.42%);
		--fds-control-strong-stroke-disabled: hsla(0, 0%, 100%, 15.81%);

		/* Control Stroke on Accent */
		--fds-control-stroke-on-accent-default: hsla(0, 0%, 100%, 8%);
		--fds-control-stroke-on-accent-secondary: hsla(0, 0%, 0%, 14%);
		--fds-control-stroke-on-accent-tertiary: hsla(0, 0%, 0%, 21.69%);
		--fds-control-stroke-on-accent-disabled: hsla(0, 0%, 0%, 20%);

		/* Control Strong Stroke on Image */
		--fds-control-strong-stroke-on-image-default: hsla(0, 0%, 0%, 42%);

		/* Card Stroke */
		--fds-card-stroke-default: hsla(0, 0%, 0%, 10%);
		--fds-card-stroke-default-solid: hsl(0, 0%, 11%);

		/* Surface Stroke */
		--fds-surface-stroke-default: hsla(0, 0%, 46%, 40%);
		--fds-surface-stroke-flyout: hsla(0, 0%, 0%, 20%);

		/* Divider Stroke */
		--fds-divider-stroke-default: hsla(0, 0%, 100%, 8.37%);

		/* Focus Stroke */
		--fds-focus-stroke-outer: hsl(0, 0%, 100%);
		--fds-focus-stroke-inner: hsla(0, 0%, 0%, 70%);

		/* Card Background */
		--fds-card-background-default: hsla(0, 0%, 100%, 5.12%);
		--fds-card-background-secondary: hsla(0, 0%, 100%, 3.26%);
		/* --fds-card-background-tertiary: unset; */

		/* Smoke Background */
		--fds-smoke-background-default: hsla(0, 0%, 0%, 30%);

		/* Layer */
		--fds-layer-background-default: hsla(0, 0%, 23%, 30%);
		--fds-layer-background-alt: hsla(0, 0%, 100%, 5.38%);

		/* Layer on Acrylic */
		--fds-layer-on-acrylic-background-default: hsla(0, 0%, 100%, 3.59%);
		--fds-layer-on-accent-background-default: var(--fds-layer-on-acrylic-background-default);

		/* Solid Background */
		--fds-solid-background-base: hsl(0, 0%, 13%);
		--fds-solid-background-secondary: hsl(0, 0%, 11%);
		--fds-solid-background-tertiary: hsl(0, 0%, 16%);
		--fds-solid-background-quarternary: hsl(0, 0%, 17%);

		/* Mica Background */
		/* --fds-mica-background-base: linear-gradient(0deg, rgb(32, 32, 32, 0.8), rgb(32, 32, 32, 0.8)), #202020; */

		/* Acrylic Background */
		--fds-acrylic-background-default: linear-gradient(
				0deg,
				rgb(44, 44, 44, 15%),
				rgb(44, 44, 44, 15%)
			),
			rgba(44, 44, 44, 96%);
		--fds-acrylic-background-base: linear-gradient(
				0deg,
				rgb(32, 32, 32, 50%),
				rgb(32, 32, 32, 50%)
			),
			rgba(32, 32, 32, 96%);

		/* Accent Acrylic Background */
		/* --fds-accent-acrylic-background-default: url("NoiseAsset_256.png"), linear-gradient(0deg, rgb(0, 120, 212, 80%), rgb(0, 120, 212, 80%)), rgb(0, 120, 212, 80%); */
		/* --fds-accent-acrylic-background-base: url("NoiseAsset_256.png"), linear-gradient(0deg, rgba(0, 63, 255, 80%), rgba(0, 63, 255, 80%)), rgb(0, 63, 255, 80%); */

		/* System */
		--fds-system-attention: hsl(199, 100%, 69%);
		--fds-system-success: hsl(113, 51%, 58%);
		--fds-system-caution: hsl(54, 100%, 49%);
		--fds-system-critical: hsl(354, 100%, 80%);
		--fds-system-neutral: hsla(0, 0%, 100%, 54.42%);

		/* System Solid */
		--fds-system-solid-neutral: hsl(0, 0%, 62%);

		/* System Background */
		--fds-system-background-attention: hsla(0, 0%, 100%, 3.26%);
		--fds-system-background-success: hsl(67, 39%, 17%);
		--fds-system-background-caution: hsl(40, 46%, 18%);
		--fds-system-background-critical: hsl(2, 28%, 21%);

		/* System Background Solid */
		--fds-system-background-solid-attention: hsl(0, 0%, 18%);
		--fds-system-background-solid-neutral: hsl(0, 0%, 62%);

		/* Borders */
		--fds-control-border-default: var(--fds-control-stroke-secondary)
			var(--fds-control-stroke-default) var(--fds-control-stroke-default)
			var(--fds-control-stroke-default);

		/* Shadows */
		--fds-card-shadow: 0px 2px 4px hsla(0, 0%, 0%, 0.13);
		--fds-tooltip-shadow: 0px 4px 8px hsla(0, 0%, 0%, 0.26);
		--fds-flyout-shadow: 0px 8px 16px hsla(0, 0%, 0%, 0.14);
		--fds-dialog-shadow: 0px 32px 64px hsla(0, 0%, 0%, 0.37), 0px 2px 21px hsla(0, 0%, 0%, 0.37);

		/* Shell Shadows */
		--fds-inactive-window-shadow: 0px 16px 32px hsla(0, 0%, 0%, 0.37),
			0px 2px 10.67px hsla(0, 0%, 0%, 0.37);
		--fds-active-window-shadow: 0px 32px 64px hsla(0, 0%, 0%, 0.56),
			0px 2px 21px hsla(0, 0%, 0%, 0.55);
	}
}


/* Dark Theme Colors */
@media (prefers-color-scheme: dark) {
	:root {
		/* Text */
		--fds-text-primary: hsla(0, 0%, 100%, 100%);
		--fds-text-secondary: hsla(0, 0%, 100%, 78.6%);
		--fds-text-tertiary: hsla(0, 0%, 100%, 54.42%);
		--fds-text-disabled: hsla(0, 0%, 100%, 36.28%);

		/* Accent */
		--fds-accent-default: hsla(var(--fds-accent-light-2));
		--fds-accent-secondary: hsla(var(--fds-accent-light-2), 90%);
		--fds-accent-tertiary: hsla(var(--fds-accent-light-2), 80%);
		--fds-accent-disabled: hsla(0, 0%, 100%, 15.81%);

		/* Accent Text */
		--fds-accent-text-primary: hsl(var(--fds-accent-light-3));
		--fds-accent-text-secondary: hsl(var(--fds-accent-light-3));
		--fds-accent-text-tertiary: hsl(var(--fds-accent-light-2));
		--fds-accent-text-disabled: hsla(0, 0%, 100%, 36.28%);

		/* Text on Accent */
		--fds-text-on-accent-primary: hsl(0, 0%, 0%);
		--fds-text-on-accent-secondary: hsla(0, 0%, 0%, 0.5);
		--fds-text-on-accent-disabled: hsla(0, 0%, 100%, 0.53);
		--fds-text-on-accent-selected: hsl(0, 0%, 100%);

		/* Control Fill */
		--fds-control-fill-transparent: transparent;
		--fds-control-fill-default: hsla(0, 0%, 100%, 0.061);
		--fds-control-fill-secondary: hsla(0, 0%, 100%, 0.084);
		--fds-control-fill-tertiary: hsla(0, 0%, 100%, 0.033);
		--fds-control-fill-disabled: hsla(0, 0%, 100%, 0.042);
		--fds-control-fill-input-active: hsla(0, 0%, 12%, 70%);

		/* Control Strong Fill */
		--fds-control-strong-fill-default: hsla(0, 0%, 100%, 54.42%);
		--fds-control-strong-fill-disabled: hsla(0, 0%, 100%, 24.65%);

		/* Control Solid Fill */
		--fds-control-solid-fill-default: hsl(0, 0%, 27%);

		/* Control Alt Fill */
		--fds-control-alt-fill-transparent: transparent;
		--fds-control-alt-fill-secondary: hsla(0, 0%, 0%, 0.1);
		--fds-control-alt-fill-tertiary: hsla(0, 0%, 100%, 0.042);
		--fds-control-alt-fill-quarternary: hsla(0, 0%, 100%, 0.07);
		--fds-control-alt-fill-disabled: var(--fds-control-fill-transparent);

		/* Control on Image Fill */
		--fds-control-on-image-fill-default: hsla(0, 0%, 11%, 70%);
		--fds-control-on-image-fill-secondary: hsl(0, 0%, 10%);
		--fds-control-on-image-fill-tertiary: hsl(0, 0%, 7%);
		--fds-control-on-image-fill-disabled: transparent;

		/* Subtle Fill */
		--fds-subtle-fill-transparent: transparent;
		--fds-subtle-fill-secondary: hsla(0, 0%, 100%, 6.05%);
		--fds-subtle-fill-tertiary: hsla(0, 0%, 100%, 4.19%);
		--fds-subtle-fill-disabled: transparent;

		/* Control Stroke */
		--fds-control-stroke-default: hsla(0, 0%, 100%, 6.98%);
		--fds-control-stroke-secondary: hsla(0, 0%, 100%, 9.3%);

		/* Control Strong Stroke */
		--fds-control-strong-stroke-default: hsla(0, 0%, 100%, 54.42%);
		--fds-control-strong-stroke-disabled: hsla(0, 0%, 100%, 15.81%);

		/* Control Stroke on Accent */
		--fds-control-stroke-on-accent-default: hsla(0, 0%, 100%, 8%);
		--fds-control-stroke-on-accent-secondary: hsla(0, 0%, 0%, 14%);
		--fds-control-stroke-on-accent-tertiary: hsla(0, 0%, 0%, 21.69%);
		--fds-control-stroke-on-accent-disabled: hsla(0, 0%, 0%, 20%);

		/* Control Strong Stroke on Image */
		--fds-control-strong-stroke-on-image-default: hsla(0, 0%, 0%, 42%);

		/* Card Stroke */
		--fds-card-stroke-default: hsla(0, 0%, 0%, 10%);
		--fds-card-stroke-default-solid: hsl(0, 0%, 11%);

		/* Surface Stroke */
		--fds-surface-stroke-default: hsla(0, 0%, 46%, 40%);
		--fds-surface-stroke-flyout: hsla(0, 0%, 0%, 20%);

		/* Divider Stroke */
		--fds-divider-stroke-default: hsla(0, 0%, 100%, 8.37%);

		/* Focus Stroke */
		--fds-focus-stroke-outer: hsl(0, 0%, 100%);
		--fds-focus-stroke-inner: hsla(0, 0%, 0%, 70%);

		/* Card Background */
		--fds-card-background-default: hsla(0, 0%, 100%, 5.12%);
		--fds-card-background-secondary: hsla(0, 0%, 100%, 3.26%);
		/* --fds-card-background-tertiary: unset; */

		/* Smoke Background */
		--fds-smoke-background-default: hsla(0, 0%, 0%, 30%);

		/* Layer */
		--fds-layer-background-default: hsla(0, 0%, 23%, 30%);
		--fds-layer-background-alt: hsla(0, 0%, 100%, 5.38%);

		/* Layer on Acrylic */
		--fds-layer-on-acrylic-background-default: hsla(0, 0%, 100%, 3.59%);
		--fds-layer-on-accent-background-default: var(--fds-layer-on-acrylic-background-default);

		/* Solid Background */
		--fds-solid-background-base: hsl(0, 0%, 13%);
		--fds-solid-background-secondary: hsl(0, 0%, 11%);
		--fds-solid-background-tertiary: hsl(0, 0%, 16%);
		--fds-solid-background-quarternary: hsl(0, 0%, 17%);

		/* Mica Background */
		/* --fds-mica-background-base: linear-gradient(0deg, rgb(32, 32, 32, 0.8), rgb(32, 32, 32, 0.8)), #202020; */

		/* Acrylic Background */
		--fds-acrylic-background-default: linear-gradient(
				0deg,
				rgb(44, 44, 44, 15%),
				rgb(44, 44, 44, 15%)
			),
			rgba(44, 44, 44, 96%);
		--fds-acrylic-background-base: linear-gradient(
				0deg,
				rgb(32, 32, 32, 50%),
				rgb(32, 32, 32, 50%)
			),
			rgba(32, 32, 32, 96%);

		/* Accent Acrylic Background */
		/* --fds-accent-acrylic-background-default: url("NoiseAsset_256.png"), linear-gradient(0deg, rgb(0, 120, 212, 80%), rgb(0, 120, 212, 80%)), rgb(0, 120, 212, 80%); */
		/* --fds-accent-acrylic-background-base: url("NoiseAsset_256.png"), linear-gradient(0deg, rgba(0, 63, 255, 80%), rgba(0, 63, 255, 80%)), rgb(0, 63, 255, 80%); */

		/* System */
		--fds-system-attention: hsl(199, 100%, 69%);
		--fds-system-success: hsl(113, 51%, 58%);
		--fds-system-caution: hsl(54, 100%, 49%);
		--fds-system-critical: hsl(354, 100%, 80%);
		--fds-system-neutral: hsla(0, 0%, 100%, 54.42%);

		/* System Solid */
		--fds-system-solid-neutral: hsl(0, 0%, 62%);

		/* System Background */
		--fds-system-background-attention: hsla(0, 0%, 100%, 3.26%);
		--fds-system-background-success: hsl(67, 39%, 17%);
		--fds-system-background-caution: hsl(40, 46%, 18%);
		--fds-system-background-critical: hsl(2, 28%, 21%);

		/* System Background Solid */
		--fds-system-background-solid-attention: hsl(0, 0%, 18%);
		--fds-system-background-solid-neutral: hsl(0, 0%, 62%);

		/* Borders */
		--fds-control-border-default: var(--fds-control-stroke-secondary)
			var(--fds-control-stroke-default) var(--fds-control-stroke-default)
			var(--fds-control-stroke-default);

		/* Shadows */
		--fds-card-shadow: 0px 2px 4px hsla(0, 0%, 0%, 0.13);
		--fds-tooltip-shadow: 0px 4px 8px hsla(0, 0%, 0%, 0.26);
		--fds-flyout-shadow: 0px 8px 16px hsla(0, 0%, 0%, 0.14);
		--fds-dialog-shadow: 0px 32px 64px hsla(0, 0%, 0%, 0.37), 0px 2px 21px hsla(0, 0%, 0%, 0.37);

		/* Shell Shadows */
		--fds-inactive-window-shadow: 0px 16px 32px hsla(0, 0%, 0%, 0.37),
			0px 2px 10.67px hsla(0, 0%, 0%, 0.37);
		--fds-active-window-shadow: 0px 32px 64px hsla(0, 0%, 0%, 0.56),
			0px 2px 21px hsla(0, 0%, 0%, 0.55);
	}
}
