/*
 * Probex design tokens and theme contract.
 *
 * New components must consume these semantic tokens. Do not add page-level
 * dark palettes or inline theme colors. Component-specific layout belongs in
 * probex-components.css; WooCommerce integrations belong in
 * probex-commerce.css.
 */

:root {
	color-scheme: light;

	--probex-color-canvas: #f4f7f9;
	--probex-color-surface: #ffffff;
	--probex-color-surface-soft: #eaf1f5;
	--probex-color-text: #172431;
	--probex-color-muted: #5b6875;
	--probex-color-border: #d9e3e9;
	--probex-color-accent: #0b749e;
	--probex-color-accent-strong: #075d80;
	--probex-color-accent-bright: #168ad4;
	--probex-color-support-accent: #087a4a;
	--probex-color-support-soft: rgba(37, 211, 102, 0.1);
	--probex-color-hero: #07111f;
	--probex-color-on-dark: #f4f9fb;
	--probex-color-on-dark-muted: #b8c8d1;
	--probex-shadow-elevated: 0 22px 60px rgba(20, 43, 57, 0.12);

	/* Compatibility aliases used by existing semantic components. */
	--probex-bg: var(--probex-color-canvas);
	--probex-surface: var(--probex-color-surface);
	--probex-surface-soft: var(--probex-color-surface-soft);
	--probex-text: var(--probex-color-text);
	--probex-muted: var(--probex-color-muted);
	--probex-border: var(--probex-color-border);
	--probex-accent: var(--probex-color-accent);
	--probex-accent-strong: var(--probex-color-accent-strong);
	--probex-support-accent: var(--probex-color-support-accent);
	--probex-support-soft: var(--probex-color-support-soft);
	--probex-hero: var(--probex-color-hero);
	--probex-shadow: var(--probex-shadow-elevated);

	/* Shared commerce contract. */
	--probex-commerce-bg: #f3f7f9;
	--probex-commerce-surface: #ffffff;
	--probex-commerce-surface-soft: #edf3f6;
	--probex-commerce-text: #172b37;
	--probex-commerce-muted: #617581;
	--probex-commerce-border: #d3e0e6;
	--probex-commerce-accent-soft: rgba(24, 147, 188, 0.11);

	/* Shared catalog contract. */
	--probex-catalog-text: #172431;
	--probex-catalog-muted: #5b6875;
	--probex-catalog-subtle: #71818c;

	/* Shared footer-office contract. */
	--probex-footer-office-surface: #f8fbfc;
	--probex-footer-office-border: rgba(11, 116, 158, 0.16);
	--probex-footer-office-mark: rgba(11, 116, 158, 0.1);
	--probex-footer-office-title: #172431;
	--probex-footer-office-muted: #5b6875;
}

html[data-probex-theme="dark"] {
	color-scheme: dark;

	--probex-color-canvas: #081018;
	--probex-color-surface: #101b25;
	--probex-color-surface-soft: #152531;
	--probex-color-text: #e6eef4;
	--probex-color-muted: #a9b8c3;
	--probex-color-border: #263846;
	--probex-color-accent: #52b7da;
	--probex-color-accent-strong: #82d1eb;
	--probex-color-accent-bright: #52b7da;
	--probex-color-support-accent: #63e49f;
	--probex-color-support-soft: rgba(37, 211, 102, 0.1);
	--probex-color-hero: #050b11;
	--probex-color-on-dark: #f4f9fb;
	--probex-color-on-dark-muted: #b8c8d1;
	--probex-shadow-elevated: 0 24px 64px rgba(0, 0, 0, 0.34);

	--probex-commerce-bg: #07131c;
	--probex-commerce-surface: #0d1d28;
	--probex-commerce-surface-soft: #122936;
	--probex-commerce-text: #ecf4f7;
	--probex-commerce-muted: #b8c8d1;
	--probex-commerce-border: rgba(142, 218, 241, 0.2);
	--probex-commerce-accent-soft: rgba(73, 180, 217, 0.15);

	--probex-catalog-text: #e6eef4;
	--probex-catalog-muted: #afbec8;
	--probex-catalog-subtle: #8297a3;

	--probex-footer-office-surface: #111f2a;
	--probex-footer-office-border: rgba(142, 218, 241, 0.14);
	--probex-footer-office-mark: rgba(38, 139, 174, 0.13);
	--probex-footer-office-title: #eef8fb;
	--probex-footer-office-muted: #aebec7;
}