/*
 * DropWiper Sales Cloud — shared design tokens.
 *
 * Single source of truth for the dark, video/imagery-friendly visual
 * language introduced with the customer-auth login/landing screens
 * (src/CustomerAuth/Shortcodes.php). Loaded via src/Core/DesignTokens.php
 * on the frontend so any frontend surface — PHP-rendered shortcodes,
 * React-rendered blocks, or a future admin screen — can reference these
 * custom properties and the .dsc-card component without redeclaring them
 * locally.
 *
 * Naming note: .dsc-card is deliberately not named .dsc-panel — that
 * class name is already used by the 3D/packaging customizer's form
 * fieldsets (src/Blocks/*, a different, light-themed pattern) and is out
 * of scope here until that area is migrated on its own.
 */

:root {
	--dsc-bg: #0a0d0f;
	--dsc-panel: #12181b;
	--dsc-panel-border: #212b2e;
	--dsc-panel-glass: rgba(18, 24, 27, 0.6);
	--dsc-panel-glass-border: rgba(237, 243, 243, 0.08);
	--dsc-blur: 16px;
	--dsc-accent: #4fe0c7;
	--dsc-accent-dim: #1f6f63;
	--dsc-mist: #edf3f3;
	--dsc-slate: #8ca0a3;
	--dsc-danger: #e2685a;
}

/*
 * "Floating card on video/background" pattern: a dark, semi-transparent,
 * blurred panel that keeps content legible over a busy background
 * (video, imagery) without fully blocking it. Padding is in em, not a
 * fixed clamp(), so it's relative to the card's own font-size and scales
 * automatically if a larger/smaller card variant is ever needed —
 * without retuning this value by hand. Sides get more room than top/
 * bottom (2em vs. 1.5em): text/inputs read as visibly inset from the
 * card's left/right edge, not just top/bottom.
 */
.dsc-card {
	box-sizing: border-box;
	background: var(--dsc-panel-glass);
	border: 1px solid var(--dsc-panel-glass-border);
	border-radius: 12px;
	padding: 1.5em 2em;
	backdrop-filter: blur(var(--dsc-blur));
	-webkit-backdrop-filter: blur(var(--dsc-blur));
}

/*
 * Browsers without backdrop-filter support (e.g. older Firefox) get a
 * near-opaque solid panel instead of a half-transparent one, so text
 * stays legible either way.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

	.dsc-card {
		background: var(--dsc-panel);
	}
}