/* no-prefix */
*,
::before,
::after {
	--tw-shadow: 0 0 #0000;
	--tw-inset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-inset-ring-shadow: 0 0 #0000;
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-blur: ;
	--tw-brightness: ;
	--tw-contrast: ;
	--tw-grayscale: ;
	--tw-hue-rotate: ;
	--tw-invert: ;
	--tw-opacity: ;
	--tw-saturate: ;
	--tw-sepia: ;
	--tw-drop-shadow: ;
}

@layer base {
	*,
	::after,
	::before,
	::backdrop,
	::file-selector-button {
		box-sizing: border-box;
		border: 0px solid transparent;
	}
	button:not(:disabled) {
		@apply cursor-pointer!;
	}
}

@theme {
	--breakpoint-xxs: 280px;
	--breakpoint-xs: 480px;
	--breakpoint-sm: 600px;
	--breakpoint-md: 783px; /* Admin Bar goes big */
	--breakpoint-lg: 961px; /* Sidebar auto folds */
	--breakpoint-xl: 1152px;
	--breakpoint-2xl: 1345px;
	--breakpoint-3xl: 1600px;
	--breakpoint-5xl: 2300px;

	--color-gray-50: #fafafa;
	--color-gray-100: #f0f0f0;
	--color-gray-150: #eaeaea; /* This wasn't a variable but I saw it on buttons */
	--color-gray-200: #e0e0e0; /* Used sparingly for light borders. */
	--color-gray-300: #dddddd; /* Used for most borders. */
	--color-gray-400: #cccccc;
	--color-gray-500: #bbbbbb;
	--color-gray-600: #949494; /* Meets 3:1 UI or large text contrast against white. */
	--color-gray-700: #757575; /* Meets 4.6:1 text contrast against white. */
	--color-gray-800: #2f2f2f;
	--color-gray-900: #1e1e1e;

	--color-override: var(--ext-override, #2271b1);

	--color-wp-theme-bg: var(--wp-admin-theme-bg, #373b3f);
	--color-wp-theme-main: var(--wp-admin-theme-main, #2271b1);
	--color-wp-theme-accent: var(--wp-admin-theme-accent, #76ed85);

	--color-editor-main: var(--wp-admin-theme-color, #3858e9);
	--color-editor-main-darker: var(--wp-admin-theme-color-darker-10, #2145e6);
	--color-editor-accent-darker: var(--wp-components-color-accent-darker-10);

	--color-design-main: var(--ext-design-main, #2271b1);
	--color-design-text: var(--ext-design-text, #ffffff);
	--color-design-tertiary: var(--wp--preset--color--tertiary);

	--color-banner-main: var(--ext-banner-main, #2271b1);
	--color-banner-text: var(--ext-banner-text, #ffffff);

	--color-extendify-main: #0b4a43;
	--color-extendify-main-dark: #05312c;
	--color-extendify-alert: #841010;
	--color-extendify-gray: #5f5f5f;
	--color-extendify-secondary: #cbc3f5;
	--color-extendify-black: #1e1e1e;
	--color-extendify-transparent-white: rgba(253, 253, 253, 0.88);
	--color-extendify-transparent-black-100: rgba(0, 0, 0, 0.07);

	--color-wp-alert-yellow: #f0b849;
	--color-wp-alert-red: #cc1818;
	--color-wp-alert-green: #4ab866;
	--color-wp-notice-success: #eff9f1;
	--color-wp-notice-error: #fcf0f0;
	--color-wp-notice-neutral: #c3c4c7;

	/* Fallbacks match what the flow hardcoded, so an untouched site is identical. */
	--color-ui-page: var(--ext-ui-page, var(--ext-banner-main, #2271b1));
	--color-ui-page-text: var(
		--ext-ui-page-text,
		var(--ext-banner-text, #ffffff)
	);
	--ui-base-action: var(--ext-ui-action, var(--ext-design-main, #2271b1));
	--color-ui-action: var(--ui-base-action);
	--ui-base-action-text: var(
		--ext-ui-action-text,
		var(--ext-design-text, #ffffff)
	);
	--color-ui-action-text: var(--ui-base-action-text);
	--color-ui-focus: var(--ext-ui-focus, var(--color-ui-action));
	--ui-base-ink: var(--ext-ui-ink, #1e1e1e);
	--color-ui-ink: var(--ui-base-ink);
	--color-ui-ink-muted: var(--ext-ui-ink-muted, #757575);
	--color-ui-line: var(--ext-ui-line, #dddddd);
	/* Transparent, so the button reads as an outline and never as a white pill. */
	--ui-base-secondary-fill: var(--ext-ui-secondary-fill, transparent);
	--color-ui-secondary-fill: var(--ui-base-secondary-fill);
	--ui-base-secondary-line: var(--ext-ui-secondary-line, var(--ui-base-ink));
	--color-ui-secondary-line: var(--ui-base-secondary-line);
	--ui-base-secondary-text: var(--ext-ui-secondary-text, var(--ui-base-ink));
	--color-ui-secondary-text: var(--ui-base-secondary-text);
	/* Merged so one utility carries both the fill and its opacity. */
	--color-ui-surface: color-mix(
		in srgb,
		var(--ext-ui-surface, #f0f0f0)
			calc(var(--ext-ui-surface-opacity, 0.8) * 100%),
		transparent
	);

	--radius-ui-card: var(--ext-ui-radius-card, var(--ext-ui-radius, 1.5rem));
	--radius-ui-input: var(--ext-ui-radius-input, var(--ext-ui-radius, 1.5rem));
	--radius-ui-button: var(--ext-ui-radius-button, var(--ext-ui-radius, 9999px));
	/* No global fallback: rounding the cards must not round the logo. */
	--radius-ui-logo: var(--ext-ui-radius-logo, 0px);

	--blur-ui: var(--ext-ui-blur, 40px);
	--shadow-ui: var(
		--ext-ui-shadow,
		0 4px 6px -1px rgb(0 0 0 / 0.1),
		0 2px 4px -2px rgb(0 0 0 / 0.1)
	);

	--font-ui-heading: var(--ext-ui-font-heading, var(--ext-ui-font, inherit));
	--font-ui-body: var(--ext-ui-font-body, var(--ext-ui-font, inherit));
	--font-ui-input: var(--ext-ui-font-input, var(--ext-ui-font, inherit));
	--font-weight-ui-strong: var(--ext-ui-heading-weight, 600);

	--text-ui-heading: var(--ext-ui-heading-size, 1.25rem);
	--text-ui-heading--line-height: 1.4;
	/* 1.2x holds the `text-xl` / `md:text-2xl` pair at the default size. */
	--text-ui-heading-lg: calc(var(--ext-ui-heading-size, 1.25rem) * 1.2);
	--text-ui-heading-lg--line-height: 1.34;
	--text-ui-status: var(--ext-ui-status-size, 0.875rem);
	--text-ui-status--line-height: 1.5;
	--font-weight-ui-status: var(--ext-ui-status-weight, 500);
	--text-ui-body: var(--ext-ui-body-size, 1rem);
	--text-ui-body--line-height: var(--ext-ui-leading, 1.5rem);

	--tracking-ui-heading: var(--ext-ui-heading-tracking, 0em);
	--leading-ui: var(--ext-ui-leading, 1.5rem);
}

/* Launch design tokens with no matching Tailwind namespace. */
@utility border-ui {
	border-width: var(--ext-ui-border-width, 1px);
	border-style: var(--ext-ui-border-style, solid);
}
@utility max-w-ui {
	max-width: var(--ext-ui-max-width, 42rem);
}
@utility gap-ui {
	gap: var(--ext-ui-gap, 1.25rem);
}
/* Scaled so one control holds the gap-5 / md:gap-8 pair exactly. */
@utility gap-ui-lg {
	gap: calc(var(--ext-ui-gap, 1.25rem) * 1.6);
}
@utility mb-ui-label {
	margin-bottom: var(--ext-ui-label-gap, 0.5rem);
}
@utility mb-ui-block {
	margin-bottom: calc(var(--ext-ui-label-gap, 0.5rem) * 2);
}
@utility gap-ui-section {
	gap: var(--ext-ui-section-gap, 1rem);
}
/* Each side reads its own property first, so unlocking padding needs no JS. */
@utility p-ui {
	padding-top: var(--ext-ui-padding-top, var(--ext-ui-surface-padding, 1.5rem));
	padding-right: var(
		--ext-ui-padding-right,
		var(--ext-ui-surface-padding, 1.5rem)
	);
	padding-bottom: var(
		--ext-ui-padding-bottom,
		var(--ext-ui-surface-padding, 1.5rem)
	);
	padding-left: var(
		--ext-ui-padding-left,
		var(--ext-ui-surface-padding, 1.5rem)
	);
}
@utility px-ui {
	padding-right: var(
		--ext-ui-padding-right,
		var(--ext-ui-surface-padding, 1.5rem)
	);
	padding-left: var(
		--ext-ui-padding-left,
		var(--ext-ui-surface-padding, 1.5rem)
	);
}
/* Two fallbacks: the partner logo and the Extendify mark ship at different heights. */
@utility h-ui-logo {
	height: var(--ext-ui-logo-height, 2.5rem);
}
@utility h-ui-mark {
	height: var(--ext-ui-logo-height, 2rem);
}
@utility h-ui-loader {
	height: var(--ext-ui-loader-height, 118px);
}
@utility rounded-ui-loader {
	border-radius: var(--ext-ui-loader-radius, 0px);
}

/* sizing */
@utility max-w-52 {
	max-width: 13rem;
}
@utility max-w-72 {
	max-width: 18rem;
}

@utility min-w-20 {
	min-width: 5rem;
}
@utility min-w-30 {
	min-width: 7.5rem;
}
@utility min-w-40 {
	min-width: 10rem;
}
@utility min-w-48 {
	min-width: 12rem;
}
@utility min-w-60 {
	min-width: 15rem;
}
@utility min-w-sm {
	min-width: 7rem;
}
@utility min-w-md {
	min-width: 30rem;
}

@utility w-40vw {
	width: 40vw;
}

@utility min-h-16 {
	min-height: 4rem;
}
@utility min-h-20 {
	min-height: 5rem;
}
@utility min-h-40 {
	min-height: 10rem;
}
@utility min-h-48 {
	min-height: 12rem;
}
@utility min-h-60 {
	min-height: 15rem;
}
@utility min-h-half {
	min-height: 50vh;
}

@utility max-h-half {
	max-height: 50vh;
}

/* typography */
@utility text-xss {
	font-size: 11px;
}
@utility text-3xl {
	font-size: 2rem;
	line-height: 2.5rem;
}
@utility leading-extra-tight {
	line-height: 0.5;
}

/* z-index */
@utility z-high-1 {
	z-index: 99998;
}
@utility z-high {
	z-index: 99999;
}
@utility z-higher {
	z-index: 999999;
}
@utility z-max-1 {
	z-index: 2147483646;
}
@utility z-max {
	z-index: 2147483647;
}

@utility ring-wp {
	--tw-ring-width: var(--wp-admin-border-width-focus, 2px);
}

/* shadows */
@utility shadow-inner-sm {
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.1),
		0 3px 15px -3px rgba(0, 0, 0, 0.035),
		0 0 1px rgba(0, 0, 0, 0.025);
}
@utility shadow-inner-md {
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.2),
		0 3px 15px -3px rgba(0, 0, 0, 0.025),
		0 0 1px rgba(0, 0, 0, 0.02);
}
@utility shadow-modal {
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.1),
		0 3px 15px -3px rgba(0, 0, 0, 0.035),
		0 0 1px rgba(0, 0, 0, 0.05);
}
@utility shadow-button {
	box-shadow: 0 0 0 1px var(--ext-design-main, #3959e9);
}
@utility shadow-toggle {
	box-shadow:
		0 0 0 2px #fff,
		0 0 0 4px var(--ext-design-main, #3959e9);
}
@utility shadow-surface {
	box-shadow: 0 5px 20px 10px rgba(0, 0, 0, 0.03);
}
@utility shadow-lg-flipped {
	box-shadow: 0px -10px 30px -15px #00000025;
}
@utility shadow-2xl-flipped {
	box-shadow: 0px -25px 50px -12px #00000025;
}
@utility shadow-vibe {
	box-shadow:
		0 4px 6px -1px rgb(0 0 0 / 0.1),
		0 2px 4px -2px rgb(0 0 0 / 0.1);
}