/**
 * ESS WC Template Pack — base layer.
 *
 * Design tokens + resets + layout primitives. Every other stylesheet in the
 * pack depends on the custom properties defined here. Brand presets override
 * only the --ess-color-* / --ess-radius-* / --ess-font-* tokens.
 */

:root {
	/* Default neutral tokens — overridden by brand presets */
	--ess-color-primary:   #1f4e79;
	--ess-color-primary-d: #173b5c;
	--ess-color-accent:    #e87722;
	--ess-color-accent-d:  #c45f0f;

	--ess-color-text:      #1a1a1a;
	--ess-color-text-sec:  #6b7280;
	--ess-color-text-mut:  #9ca3af;

	--ess-color-bg:        #ffffff;
	--ess-color-bg-sec:    #f8f9fa;
	--ess-color-bg-mut:    #f3f4f6;

	--ess-color-border:    #e5e7eb;
	--ess-color-border-d:  #d1d5db;

	--ess-color-success:   #16a34a;
	--ess-color-success-bg:#dcfce7;
	--ess-color-error:     #dc2626;
	--ess-color-error-bg:  #fee2e2;
	--ess-color-warning:   #f59e0b;
	--ess-color-warning-bg:#fef3c7;
	--ess-color-info:      #0284c7;
	--ess-color-info-bg:   #dbeafe;

	--ess-radius-sm:       4px;
	--ess-radius-md:       8px;
	--ess-radius-lg:       16px;
	--ess-radius-full:     9999px;

	--ess-font-body:       system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ess-font-heading:    var(--ess-font-body);
	--ess-text-xs:         12px;
	--ess-text-sm:         14px;
	--ess-text-base:       16px;
	--ess-text-lg:         18px;
	--ess-text-xl:         22px;
	--ess-text-2xl:        28px;
	--ess-text-3xl:        36px;

	--ess-weight-regular:  400;
	--ess-weight-medium:   500;
	--ess-weight-semibold: 600;
	--ess-weight-bold:     700;

	--ess-space-1:         4px;
	--ess-space-2:         8px;
	--ess-space-3:         12px;
	--ess-space-4:         16px;
	--ess-space-5:         20px;
	--ess-space-6:         24px;
	--ess-space-8:         32px;
	--ess-space-10:        40px;
	--ess-space-12:        48px;

	--ess-shadow-sm:       0 1px 2px rgba(0,0,0,.05);
	--ess-shadow-md:       0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.05);
	--ess-shadow-lg:       0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.05);

	--ess-container:       1216px;
}

/* Screen-reader-only utility (WCAG safe) */
.ess-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* Container */
.ess-wct-container {
	max-width: var(--ess-container);
	margin-inline: auto;
	padding-inline: var(--ess-space-4);
}

/* Focus visible (WCAG 2.2 SC 2.4.11/2.4.12/2.4.13) */
:focus-visible {
	outline: 2px solid var(--ess-color-accent);
	outline-offset: 2px;
	border-radius: var(--ess-radius-sm);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}