:root {
	/* Brand Colors */
	--wppo-primary: var(--wp-admin-theme-color, #2271b1);
	--wppo-primary-hover: var(--wp-admin-theme-color-darker-10, #135e96);
	--wppo-primary-soft: rgba(34, 113, 177, 0.08);
	--wppo-primary-soft: color-mix(in srgb, var(--wppo-primary) 8%, transparent);
	--wppo-primary-medium: rgba(34, 113, 177, 0.15);
	--wppo-primary-medium: color-mix(in srgb, var(--wppo-primary) 15%, transparent);

	/* Backgrounds */
	--wppo-bg-app: #f8fafc;
	--wppo-bg-card: #ffffff;
	--wppo-bg-card-surface: #fafbfc;
	--wppo-switch-hover: #f1f5f9;
	--wppo-bg-sidebar: #0f172a;
	--wppo-bg-sidebar-hover: rgba(255, 255, 255, 0.06);
	--wppo-bg-sidebar-active: color-mix(in srgb, var(--wppo-primary) 20%, transparent);

	/* Borders */
	--wppo-border: #e2e8f0;
	--wppo-border-hover: #c7d2e0;

	/* Form controls */
	--wppo-select-arrow: #64748b;

	/* Text */
	--wppo-text-main: #0f172a;
	--wppo-text-muted: #64748b;
	--wppo-text-light: #94a3b8;
	--wppo-text-sidebar: #94a3b8;
	--wppo-text-sidebar-active: #ffffff;

	/* Semantic Colors */
	--wppo-success: #059669;
	--wppo-success-bg: #ecfdf5;
	--wppo-success-border: #a7f3d0;
	--wppo-error: #dc2626;
	--wppo-error-bg: #fef2f2;
	--wppo-error-border: #fecaca;
	--wppo-warning: #d97706;
	--wppo-warning-bg: #fffbeb;
	--wppo-warning-border: #fde68a;
	--wppo-info: #0284c7;
	--wppo-info-bg: #f0f9ff;
	--wppo-info-border: #bae6fd;

	/* Danger */
	--wppo-danger: #dc2626;
	--wppo-danger-hover: #b91c1c;

	/* Effects */
	--wppo-radius: 12px;
	--wppo-radius-sm: 8px;
	--wppo-radius-xs: 6px;
	--wppo-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
	--wppo-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
	--wppo-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
	--wppo-shadow-premium: 0 0 0 1px color-mix(in srgb, var(--wppo-primary) 8%, transparent), 0 8px 24px -4px color-mix(in srgb, var(--wppo-primary) 12%, transparent);

	--wppo-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	--wppo-max-width: 1120px;

	/* Sidebar */
	--wppo-sidebar-width: 256px;
}