/**
 * Primitive — Surface
 *
 * Expected HTML:
 *   <div class="ec-surface">…</div>
 *   <div class="ec-surface ec-surface--raised ec-surface--charged">…</div>
 *
 * The customer site's base panel (Frontend Stage 1, 2026-10-01): one
 * background/border/radius treatment every future customer panel
 * (competition page panels, basket/checkout summaries, account cards)
 * starts from, instead of each section restating its own. Not a
 * replacement for the Card component (components/card.css), which the
 * locked Competition Card builds on — Card stays as-is.
 *
 * Variants:
 * - (base)      surface colour, hairline border, radius-lg.
 * - --raised    one step lighter, elevation-2 — panels that sit above
 *               other surfaces (summaries, sticky bars).
 * - --sunken    darker than the canvas — wells, inputs groups, code-ish
 *               proof/verification blocks.
 * - --glass     frosted glass — only for EC-DESIGN.md's listed glass
 *               contexts (navigation, modals, floating panels).
 * - --charged   a thin energy line along the top edge — the site's
 *               signature "charged" cue. Sparingly: at most one or two
 *               per view, for the panel that matters most.
 * - --padded    standard internal padding (16px mobile, 24px ≥640px).
 *
 * Loaded on customer pages only (EC_Frontend::enqueueSiteAssets()).
 */

.ec-surface {
	position: relative;
	background-color: var(--ec-color-surface);
	border: 1px solid var(--ec-color-border);
	border-radius: var(--ec-radius-lg);
	color: var(--ec-color-text-primary);
}

.ec-surface--raised {
	background-color: var(--ec-color-surface-elevated);
	box-shadow: var(--ec-elevation-2);
}

.ec-surface--sunken {
	background-color: var(--ec-color-surface-sunken);
}

.ec-surface--glass {
	background-color: var(--ec-glass-surface);
	border-color: var(--ec-glass-border);
	backdrop-filter: blur(var(--ec-glass-blur));
	-webkit-backdrop-filter: blur(var(--ec-glass-blur));
}

.ec-surface--charged::before {
	content: '';
	position: absolute;
	top: -1px;
	left: var(--ec-space-5);
	right: var(--ec-space-5);
	height: 1px;
	background: var(--ec-charge-line);
	pointer-events: none;
}

.ec-surface--padded {
	padding: var(--ec-space-4);
}

@media (min-width: 640px) {
	.ec-surface--padded {
		padding: var(--ec-space-5);
	}
}