/*
 * AB by Gus — Liquid Glass design tokens (scope doc §9).
 * Naming follows Apple's own convention, prefixed --abg-lg-* to avoid
 * collision with SEO by Gus's assets/css/admin.css or theme tokens.
 *
 * Contrast: panels use a LIGHT glass tint over the (light) wp-admin
 * background, with near-black text — this keeps text-in-glass well above
 * the 7:1 AAA target without needing a separate scrim, unlike glass over a
 * photo/dark background where a scrim would be required.
 *
 * Performance budget: full backdrop-filter blur is applied only on
 * :hover/:focus-within (see .abg-glass rules in admin.css / widget.css),
 * so at most one or two cards are ever blurred at once — comfortably under
 * the ~5-simultaneous-element ceiling this budget calls for.
 */

:root {
	--abg-lg-bg-primary: rgba( 255, 255, 255, 0.55 );
	--abg-lg-bg-secondary: rgba( 255, 255, 255, 0.35 );
	--abg-lg-bg-flat: #ffffff;

	--abg-lg-blur-strong: 24px;
	--abg-lg-blur-subtle: 12px;

	--abg-lg-border-color: rgba( 255, 255, 255, 0.5 );
	--abg-lg-border-width: 1px;

	--abg-lg-shadow-elevated: 0 8px 32px rgba( 0, 0, 0, 0.12 );
	--abg-lg-shadow-flat: 0 1px 2px rgba( 0, 0, 0, 0.06 );

	--abg-lg-radius-lg: 20px;
	--abg-lg-radius-md: 14px;
	--abg-lg-radius-sm: 10px;

	--abg-lg-duration-fast: 200ms;
	--abg-lg-duration-base: 350ms;
	--abg-lg-easing-spring: cubic-bezier( 0.34, 1.56, 0.64, 1 );

	--abg-lg-text-primary: #1d2327;
	--abg-lg-text-secondary: #50575e;
}

@media ( prefers-color-scheme: dark ) {
	:root {
		--abg-lg-bg-primary: rgba( 30, 30, 32, 0.55 );
		--abg-lg-bg-secondary: rgba( 30, 30, 32, 0.4 );
		--abg-lg-bg-flat: #1e1e20;
		--abg-lg-border-color: rgba( 255, 255, 255, 0.12 );
		--abg-lg-text-primary: #f0f0f1;
		--abg-lg-text-secondary: #c3c4c7;
	}
}

/* Base glass surface. Only applied on interaction (see admin.css) to respect the performance budget. */
.abg-glass {
	background: var( --abg-lg-bg-primary );
	-webkit-backdrop-filter: blur( var( --abg-lg-blur-strong ) );
	backdrop-filter: blur( var( --abg-lg-blur-strong ) );
	border: var( --abg-lg-border-width ) solid var( --abg-lg-border-color );
	border-radius: var( --abg-lg-radius-lg );
	box-shadow: var( --abg-lg-shadow-elevated );
	color: var( --abg-lg-text-primary );
	transition: transform var( --abg-lg-duration-base ) var( --abg-lg-easing-spring ),
		box-shadow var( --abg-lg-duration-base ) var( --abg-lg-easing-spring );
}

/* Default state for cards not currently focused — flat, no blur cost. */
.abg-glass--flat {
	background: var( --abg-lg-bg-flat );
	border: var( --abg-lg-border-width ) solid rgba( 0, 0, 0, 0.08 );
	border-radius: var( --abg-lg-radius-md );
	box-shadow: var( --abg-lg-shadow-flat );
	color: var( --abg-lg-text-primary );
	transition: box-shadow var( --abg-lg-duration-fast ) var( --abg-lg-easing-spring );
}

/* No backdrop-filter support: flat fallback, never a broken/transparent panel. */
@supports not ( backdrop-filter: blur( 1px ) ) {
	.abg-glass {
		background: var( --abg-lg-bg-flat );
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

@media ( prefers-reduced-transparency: reduce ) {
	.abg-glass {
		background: var( --abg-lg-bg-flat );
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.abg-glass,
	.abg-glass--flat {
		transition: none;
	}
}