/* Base - Globals */
/* Global styles that are enabled by default. */

@layer base {
	:root {
		/* Color Scheme --- */
		/* https://tailwindcss.com/docs/color-scheme */
		color-scheme: light;
		@variant dark {
			color-scheme: dark;
		}

		/* Scrollbars --- */
		/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color */
		/* https://developer.chrome.com/docs/css-ui/scrollbar-styling */
		scrollbar-color: var(--color-surface-300-700) var(--color-surface-100-900); /* thumb / track */
		scrollbar-width: thin;
	}

	html {
		/* Mobile Tap Highlight Color (WebKit only) --- */
		/* IMPORTANT: this is useful for mobile accessibility. */
		/* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
		/* -webkit-tap-highlight-color: rgba(128, 128, 128, 0.5); */
		-webkit-tap-highlight-color: color-mix(in oklab, var(--color-surface-50-950) 30%, transparent);
	}

	body {
		/* Background */
		background-color: var(--body-background-color);
		@variant dark {
			background-color: var(--body-background-color-dark);
		}
		/* Typography */
		color: var(--base-font-color);
		font-family: var(--base-font-family);
		font-size: var(--base-font-size);
		line-height: var(--base-line-height);
		font-weight: var(--base-font-weight);
		font-style: var(--base-font-style);
		letter-spacing: var(--base-letter-spacing);
		@variant dark {
			color: var(--base-font-color-dark);
		}
	}

	/* Elements --- */

	/* https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor */
	button:not(:disabled),
	[role='button']:not(:disabled) {
		cursor: pointer;
	}

	/* Form Placeholders --- */

	.input::placeholder,
	.textarea::placeholder,
	.ig-input::placeholder,
	.ig-textarea::placeholder {
		color: var(--color-surface-700-300);
	}

	/* Selection --- */
	/* https://developer.mozilla.org/en-US/docs/Web/CSS/::selection */

	::selection {
		background-color: color-mix(in srgb, var(--color-primary-500) 50%, transparent);
	}

	/* States --- */

	*:disabled,
	.disabled {
		opacity: 0.5;
		& > * {
			pointer-events: none;
		}
	}

	/* Outlines and Focus --- */
	/*
		REMINDER: Never disabled focus and outlines
		as this would be harmful to accessibility!
		Source: http://www.outlinenone.com/

		EXAMPLE: Set a global focus style.
		Apply this in your app's global stylesheet:
		:focus { @apply focus:outline-primary-50; }
	*/

	/* Component Focus Utility */
	/* .focused {
		@apply ring-[2px] ring-surface-950 dark:ring-surface-50 ring-inset;
	} */
}